nthony

Thanks, I am controlling the player, so animation is initially in a paused state, so I do not need to worry about the flash as described in video. What I am trying to find a better way of text to hidden until the block is fully shown, then the text content opacity will be 1. Then when the block is moving to right the text should be visible, just like in the example.

Hi, I got this working but just wondering if there is a better way to use animations directly. I need the text to be initial have an opacity of 0 then only want the opacity to change to 1 only after a delay. Thanks, Anthony

Interesting solution, thanks for your insight and help. I do pause the timeline and progress the timeline in a loop.

Thanks for this quick demo showing this, this kind of what I need, except that each element needs to have its own animation defined. I've been using effects to create different animations for different elements, but this may not be the best way. Here is an example codepen showing different animations per element. I'm trying to evenly stagger all the starts across all elements and for the animation to complete in 2 seconds. https://codepen.io/nthonymiller/pen/gOjorxr

Hi, Question: How can I run animations to for an exact period of time? Eg 2 seconds - I see that I can use set duration(2), but this simply alters the timescale not the duration itself, so the player only runs for 2 seconds. Question: How can I stagger a list of Dom Elements to be evenly distributed stagger starts ? - Complexity here is that each element can have a different animation applied. - Can I use distribute() method to calculate positions? Essentially the problem I am attempting to solve is - I have a list of Dom elements that I need to animate, each being staggered over a fixed time window. All animations should be completed within the specified time duration. Eg 10 elements need to be animated, and staggering each start, but all animations must finish within 2 seconds.