Synchronise animation

[Regis]

Hi,

 

I need to grow a bar and start an other animation at a certain position. What is the best way to achieve this ?

I the following exemple I need to start the text animation when the bar is at the start position of it.

 

 

Thanks,

 

 

See the Pen RrNReY by anon (@anon) on CodePen

[Diaco]

Hi Regis 

 

pls check this blog post about Position Parameter : Understanding the Position Parameter

[Regis]

Hi,

 

Thanks the video is very interesting, but when i was talking about position it's about physical position not timing.

I would like to have an animation with the bar starting at the left of the screen the growing upward the other side.

When it's X position is at the position of the first character of the text it start the stager of the text. In the stager each letter animation should start when the bar is at the X position of the letter.

One of the solution is to take the duration wanted to cross the screen, search the time (t1) when the bar reach the text position, compute the time to reach the end postion to reach the end of the text, take this time and affect it to the stagger duration and start the stagger at t1.

But maybe there's an easier way of doing it ?

[PointC]

Hi Regis ,

 

I'm not sure if this is exactly what you mean, but I just flipped your timeline a bit starting with the bar animation and then overlapping the staggered text. I didn't do any calculations so the letters may not be a perfect match to when the bar hits their x position, but that is happening so fast, I'm not sure anyone would notice.

 

You can probably get the bar position and calculate the position of each letter and get that all perfectly synchronized, but that seems like a lot of work for such a fast animation. I just eyeballed the overlap time in my example.

 

If you need more precision to make it absolutely perfect, I'm sure some of the mods can help you. 

 

Hopefully this helps a bit.

 

See the Pen vLOKMj by PointC (@PointC) on CodePen