i want to move this to the end of the orange block. how should i do that?
note: with JS i can change width of the orange block. So the pointer has to be at the end of the orange block. how should i do this?
https://codepen.io/avinash-tallapaneni/pen/ExRomwX
14 Replies
post with
right:
vs trying to calc it from the leftthat might work unless it's some sort of animation
Because its relative parent is the bar you should be able to just have a hard value and it will move with the bar.
i already tried with "right: 50 rem " but its moving only a few cm and not reaching the end of the orange bar
yeah this one has animation in it @ʙᴏᴏʙ 2.0
u need the text to move with the orange block?
does the user has any control over the block?
or anything that user will do, will tht have any effect on the animation
asking cause if not then u can just give the same animation keyframes to both of the text and blobk
else u might need to use js
yes the text has to move with the orange bar. it should point out the scaled values, which i did in js. i can change the orange bar width in js but the text is not following.
i did something yesterday in a standalone project , it was working file but when i implemented it in this project i ran into this issue
50rem? more like it just needs -4rem?
or you could calc the size of half the tooltip
yeah i dont know whats wrong, my brain is mushy thinking about it
well I'd just tell you to get the coordinate of the right end of the orange block and code it so the texts coordinate is always same as the right end of the orange block so the text will always move along with the orange block
gd thing it will work regardless of anything but I'm more concerned if that's even nessessary
Also animating width's can be taxing/bad practice just fyi. Some times you can't avoid it for what you want. In this case though I would probably use a proper <progress> element
Though that would probably break the relative pos 🤔 so yea maybe not (cause the bar inside progress I don't think you could put a relative on)
now its working, when i gave right around 40px it didnt even move 😵💫
i gave something like this for animation
animation: progress 0.5s ease-in-out forwards;
@b1mind
its not starting from 0, just moving for existing position
Yea I'm just saying in general animating width/height is bad
You typically want to use scale/transform, so yea 😄 start/end do not matter.