Jump to content
Search Community

How to setup control of Tweens and Timelines together AND separately?

Rich Shupe test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey, guys!


I'm wondering the best way to setup a somewhat complex situation in which I can control tweens (TweenMax) from multiple timelines (TimelineMax) and/or from timelines and the tweens themselves. This is too involved for a CodePen, but it's likely just conceptual and I'll clarify, further.


Here are some givens:

  • I'm using drawSVG, but I think the analogy can apply to any tween. For simplicity, imagine a simple x tween in all cases
  • 5 sets of 5 unique tweens (resulting in 25 unique tweens). 
  • need to animate each set in sequentially, but out simultanously. that is, "1,2,3,4,5 in" and "12345 out."
  • The rub is that I want to be able to interrupt at any time. If this is clear, I could end up with "1,2,3 (half way) in", interrupt, and then "123.5 out" That is, 1 and 2 will finish, 3 will be half-way complete, I interrupt, and the 1, 2, and the visible half of three all tween out at the same time.

When I was able to animate in and out sequentially, this was super easy because all I had to do was create one timeline and reverse it. Most important to this question, I could interrupt any time and everything looked beautiful. Half-complete still reversed seamlessly.


When I was asked to switch to sequential in and simultaneous out, I was no longer able to reverse with a single timeline.reversre() call any time I wanted.


For my first test, I created two timelines: sequential and simultaneous. I could easily play sequential in, then set the progress of simultaneous to 1 and reverse that timeline out. All fine, but I was no longer able to interrupt the switches. For example, half way through sequential in, the non-complete timelines would obviously jump to their ends to simultaneously reverse out.


Then I wondered if I could create just the 5 sequential timelines but tell each tween to reverse individually (instead of reversing the timeline). And, I would then cleanup using progress() to make sure the timeline was at 0, etc. That is: "group1timeline.play()"; interrupt half way through the 3rd tween; "all group1 tweens reverse"; group1timeline.progress(0). But, I got some odd results.


I moved on to thinking about synchronizing progress for each corresponding tween in the sequential and simultaneous timelines, but thought that too complicated.


Next I thought about not using TimelineMax at all. :cry:. Put each tween of a group in an array and then play and reverse each one. That seems like it will work.


How would you recommend setting up 5 sets of tweens so that I could sequentially  animate each set in, but interrupt and simultaneously animate only the progress thus far, out simultaneously?

Link to comment
Share on other sites

I should add that the result I get when I try to reverse each individual tween (as when I'm using getChildren() on the timeline) is that they just pop out.


Also, I like the Timeline use because all my events are set-level, not individual tween-level. So, if I play and reverse a timeline, i can use complete and reverse event handlers, etc If I play the timeline, but reverse the tweens, it's a bit more of a pain.

Link to comment
Share on other sites

Hey Rich,


Great to see you! Hope everything is well with you. 


Thanks for the incredibly thorough explanation. Yeah, once you start getting into "i want to reverse the animation but have some things just a little different", then you really aren't reversing. And as you have found out, looping though getChildren() and adjusting startTime()'s or whatever can get messy pretty quickly.

And of course managing sets of loose tweens on your own can be another bag of trouble.


So instead of getting super dirty with all that, I am going to suggest that you when you want to "reverse" that you actually create a new Timeline on the fly.


In very basic terms, each slide will be an object with its own animateIn() and animateOut() methods. These methods will each return a new TimelineLite/Max with a custom animation. Jack has been recommending this approach for years and it really shows the flexibility of the platform. 


So you might have a button that does


Or you might build a self-playing slide show that is a Timeline that contains all the animateIn() / animateOut() sequences like:

var slideshow = new TimelineLite();
.add(slide1.animateOut(), "+=1")
.add(slide2.animateOut(), "+=1")

So what might an animateIn() method look like? Perhaps like this

function animateIn() {
 var tl = new TimelineLite();
  tl.staggerTo(slideElements, 1, {x:200}, 0.5);
  return tl

How does this all work together? Let me show you...



And here is a CodePen demo: http://codepen.io/GreenSock/pen/NPpWbO?editors=101


Please keep in mind this was all thrown together fairly quickly. The code could be more elegant, but I just want to focus on the concepts of these objects that have their own animateIn() and animateOut() methods. Hopefully those points come across clearly. 


I'm pretty sure adding DrawSVG into the mix shouldn't be a problem. If your animateIn() animation is a complex series of Bezier tweens, then simulating a "sort of reverse" with this approach may prove difficult. 


Again, great to see you and excited to know you have your hands deep into GSAP on the JS side.





  • Like 6
Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...