Animation with timeline controls, and looping sections

[kith+kin]

Hey everyone,

 

I've not had to give too much thought in the past to how I structure timelines, but I think it's going to be important on an upcoming project so would like some advice on how to tackle it.

 

The animation is broken in to three steps, it should play but loop at the end of each step (almost in a passive state) until the user chooses to proceed to the next step. The user can also choose to play one of the three steps of the animation via navigation / buttons.

 

All elements of the animation exist within a single provided SVG. Each scene will need to do different things to those same elements. So for example in step one I'll fade a key element in, in step two that same element might move off to the side.

 

What would be the best way to tackle this? I've had two thoughts on how to approach it.

 

Single Timeline

Create a single (huge) timeline. Then add timeline labels at strategic points which should allow me to control which portion of the animation to play. Then figure out how to loop the last portion of each section until there is a user interaction such as clicking a 'next' button, or allowing them to choose a different step like above.

 

Multiple Timelines

Create a single global timeline. Then add separate timelines for each 'scene'. This should allow me the same control as above but keep the file cleaner as I can break the animation in to smaller chunks.

 

Which of these is the better pattern to take, or is it worth doing it completely differently?

 

Does anyone have examples of something similar? I've been looking around and found some examples but nothing seems to be quite like the above.

Any help would be appreciated!

 

Thanks

Sam

[ZachSaucier]

Hey Sam. Either approach that you list is doable and I think one over the other depends on the animations and personal preference. Using multiple timelines would be easier to do the looping but would be more difficult to keep values to what they should be if you're animating the same properties of the same elements in different timelines. One big timeline with labels would be the opposite. It's hard to make a recommendation one way or the other without knowing more about your animations  

[kith+kin]

Thanks @ZachSaucier.

 

At least it sounds like I'm thinking about it the right way round. This was my concern also.

If I create separate timelines the elements would get out of sync with each other when allowing the user to jump about / between them.

 

I think in this instance it would be better to animate it all out in one long timeline from start to finish, then figure out if it's possible to loop the animation at the required points, but allow the user to jump past those set loop on command.

 

Is it easy enough to loop certain segments of an animation but allow the user to jump past the loop?

[ZachSaucier]

If you're using one big timeline I'd likely add .call()s to the timelines after each section to check whether or not to loop. 

 

To move between sections on button click, just do tl.seek('yourLabel').