Recalculate properties in timeline

[navelascoa]

Hi,

I want to know if it is possible to recalculate values in timeline properties.
My case is a timeline (literally) that is divided into several segments and an icon that progresses between them.
The problem is when changing the size of the browser, the start and end of the icon in its respective segment is not recalculated.

I appreciate any response or guidance. I add an example

 

(sorry my english)

See the Pen MWQJLgB by nelson-velasco (@nelson-velasco) on CodePen

[GreenSock]

Hi @navelascoa. Welcome to the forums. 

 

I don't understand what you're asking. I removed all the animations and resized the browser to see if you had responsive artwork and it doesn't look like you do. What exactly do you want to recalculate? Can you strip things down to something even simpler, like a couple of colored <div> elements only? I'm sure there's a way to accomplish what you want, but I'm just not understanding your goal. 

[navelascoa]

Thanks for the reply.
Maybe with pictures I can explain it better.
For example, in image one (1) the browser is 1920x969px and the position of the advance icon animation is correct.
The second image (2) is the browser resized to 1372x675px during execution, then the advance icon appears to be in the wrong position.

I hope to make myself understand better

 

[GreenSock]

Sorry, that didn't help. It is not clear how one would know what "correct" or "incorrect" is exactly. I think it would help a lot if you simplified things down to just a few colored <div> elements and the most basic code you possibly can which would make it extremely clear what "correct" means and where things are "incorrect". Maybe a red <div> where it's supposed to be, and then a white one where it actually is? 

[navelascoa]

Thanks for the patience.

 

Trying to simplify:

See the Pen wvydaby by nelson-velasco (@nelson-velasco) on CodePen

1. I made a Gsap timeline that goes from point A to point B
2. Point B is associated with the width of a specific div
3. This div can vary in width (resize)
4. Then I associate the movement to the width of that div as follows:

.to(icon_advance,{  left: myDiv.offsetWidth, })

5. The Gsap timeline doesn't adjust to the new width, or I don't know how to do it.

 

Again i appreciate any response

[GreenSock]

Oh, that's so much clearer! Thank you!

 

There are many ways to approach this. I think the simplest might be to just set position: relative on the parent and then make your animation go to left: "100%" instead of left: myDiv.offsetWidth.

 

See the Pen jOZmWVW?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help?

[navelascoa]

It works. Thank you.