Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
hookmark

Tween Arrays Lost "sequence" Method in New GSAP

Recommended Posts

     
	//old way
	tl.add([
        //single hop
        TweenMax.fromTo("#tail1", 0.25,  {rotation: 24},{rotation: -24, ease: Power1.easeInOut}),
        TweenMax.to("#tail1", 0.1, {rotation: 0, ease: Power1.easeIn}),
        TweenMax.to("#tail1", 0.4, {rotation: 24, ease: Power3.easeOut}),
    ],0, "sequence");

	//new way
	tl.add([
        //single hop
        gsap.fromTo("#tail1", 0.25,  {rotation: 24},{rotation: -24, ease: "power1.inOut"}),
        gsap.to("#tail1", 0.1, {rotation: 0, ease: "power1.in", delay: .25}),
        gsap.to("#tail1", 0.4, {rotation: 24, ease: "power3.out", delay: .35}),
    ],0);

Hi! This is my first ever post in the forums, but I've gotten so much valuable information from here over the past several years, so first and foremost, this community has my great appreciation. After over a year having not directly touched banner/GSAP animation, I recently dove back in and saw some amazing new things had happened with the new GSAP. But then I saw something I was quite sad about...like, it surprised me just how sad haha.

One of my favorite ways to break out smaller pieces of complex animations was with the method under "//old way" in the code snippet (the codepen is just an example of one such complex animation where these tween arrays were extremely helpful). It was a beautiful thing to animate freely with any combination of 'from, to, fromTo, and set' then slap a "sequence" after the position parameter and know that the whole little sequence could then be moved around on the timeline without the need for further nesting timelines or doing a bunch of math for delay values. You could even add negative delays to get some overlap if desired—it was slick! Under "//new way," durations of tweens get added for the delay value of the next tween. It works the same way as "sequence" did, but it's more work, and animating becomes a pain as you're dialing it in because you have more things to change. Is there any hope for the "sequence" method on tween arrays to make a comeback?

It's also very likely that I'm not versed enough in the new GSAP to know there's something better, faster, and stronger than my beloved "sequence". I am aware of the new keyframes method, which seems super cool, but as far as I know, not as cool for two reasons: you can't combine "from/fromTo/to" within the keyframe sequence, and you can't mix targets within the keyframes. That makes sense when you think of them strictly as keyframes, but I miss the flexibility. Have I missed something with the keyframes method? Or is there some other new method that I should explore?

 

I appreciate any thought toward this, and I'm curious to know if I'm alone or if anyone else feels like something has been lost here.

See the Pen zPwaMV?editors=0010 by hook-motion (@hook-motion) on CodePen

  • Like 2
Link to comment
Share on other sites

Hey Mark and welcome to the GreenSock forums! We're so glad you've found them to be useful.

 

That kangaroo animation is quite impressive, well done! It seems like you've been animating a while! Have you been animating since Flash days? Did you code it from scratch or were you working off of an animation someone else created for the timings and such?

 

Sorry to hear about your sadness. @GreenSock might be able to provide some insight as to why that functionality was removed (I know that I never used it in the past; I'm betting not many people used it).

 

As you mention, it was kind of replaced by keyframes functionality which I think would work well for most of the parts of that demo that you shared. For example: 

// old 
tl.add([
  TweenMax.fromTo(follicle, 0.15, {
    transformOrigin: "4% 100%", 
    scaleY: ranScaleY, 
    rotation: ranRot
  }, {
    rotation: 70, 
    scaleY: .7, 
    ease: Power1.easeOut
  }),
  TweenMax.to(follicle, 0.6, {
    scaleY: ranScaleY, 
    rotation: ranRot, 
    ease: Power1.easeInOut
  }),
], 0, "sequence");

// new!
tl.to(follicle, {
  defaults: { // passed to all keyframes
    ease: "power1",
    scaleY: ranScaleY, 
    rotation: ranRot
  }, 
  
  keyframes: [
    { 
      duration: 0, // acts like a .set 
      transformOrigin: "4% 100%"
    }, {
      duration: 0.15, 
      rotation: 70, 
      scaleY: .7
    }, 
    { duration: 0.6 }),
  ]
});

Notice that the above also makes use of GSAP 3's defaults functionality and condensed ease formatting :) 

 

For mixing targets or having varied offsets we recommend using a timeline (optionally within a function). 

tl.add(
  gsap.timeline()
  .to(elem1, { prop: endVal })
  .to(elem2, { prop: endVal }, '<+=0.5') // uses the slick new < operator  
  // > is also available - see https://greensock.com/position-parameter/ for more info
});

 

How does that feel? We know that migrating to GSAP 3 might take some time for someone like you who used some of the finer details of the older GSAP a lot but we think that you'll come to love it with time. Everyone who we've talked to who has used it for a while has found it to be all-around more pleasant to work in.

 

If there's still a felt need (like if I'm misunderstanding what you're saying) please say something and we'll do our best to help out however we can.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Hey Zach!

Thanks so much for this. It's exactly what I was hoping for. That method of dropping a timeline with its tweens directly within an .add() is great! And then the keyframe with a duration of 0 is also awesome for a "fromTo" functionality. My sadness is lifted!

In the Flash days, I was stubbornly mostly on the timeline, but I picked up GSAP promptly with Flash's demise. The kangaroo was something I animated from scratch with GSAP. The kangaroo, alone, was originally for a banner using a realistic png that I split apart for puppeting. In the banner it just hopped quickly across the stage, so I made this codepen to feature the hop cycle and some original illustration. 

I hope other people will find your response as useful as I have. Some here certainly will. 

Thanks,
Mark

  • Like 2
Link to comment
Share on other sites

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.

×