TweenAlign and appendMultiple

[explorerzip]

Are TweenAlign and appendMultiple still supported in the latest GSAP? I came across this Javascript code snippet in a colleague's hand-coded HTML banner ad:

 

window.TweenAlign = {
                NORMAL: "normal",
                SEQUENCE: "sequence",
                START: "start"
            };

            var counter = 0;

            /* begin animation */
            tl.appendMultiple([
                TweenLite.to(steering, 1, {rotation:-20, ease: Sine.easeInOut}),
                TweenLite.to(steering, 1, {rotation:20, ease: Sine.easeInOut}),
                TweenLite.to(steering, 1, {rotation:0, ease: Sine.easeInOut}),
            ], 2, TweenAlign.START, 1);

The ad works fine and he's using a Google CDN to load GSAP version 1.20. I assume this code is a holdover from the ActionScript days?

 

I've been using GSAP for years, but haven't come across this before and it doesn't exit in the Docs as far as I can tell. Has tl.appendMultiple been replaced by tl.add and has TweenAlign has been replaced by the TimelineLite position parameter?

 

The ad still works properly, but I want to make sure that my team is not using old code.

[GreenSock]

8 minutes ago, explorerzip said:

Has tl.appendMultiple been replaced by tl.add and has TweenAlign has been replaced by the TimelineLite position parameter?

 

Exactly. Yeah, that was a holdover from an archaic version of the ActionScript files but the modern API is more streamlined. That code could look something like: 

 

tl.to(steering, 1, {rotation:-20, ease:Sine.easeInOut}, 2)
  .to(steering, 1, {rotation:20, ease:Sine.easeInOut})
  .to(steering, 1, {rotation:0, ease:Sine.easeInOut});

 

Actually, you could probably get an even more natural look if you use a CustomEase in a single tween, or a CustomWiggle. Are you aware of those? It can be super useful for effects like this where you want the rotation to oscillate a bit and return to 0. Just an idea. 

 

I'd definitely shift away from the old API because it won't be supported in the next major release. 

 

Happy tweening! 

[explorerzip]

Thanks for the quick response Jack! I figured the code was from the AS, but thought I'd check anyway. Good to know that it won't be supported in the next release. Time to send out emails to the team

 

I am aware of CustomEase and CustomWiggle (amazing work BTW), but likely cannot use them in banner ads. I load GSAP using a CDN and have to watch my package file payload carefully to meet IAB specs. Out of curiosity, how big are the CustomEase and CustomWiggle JS files?

[GreenSock]

I hear ya. CustomEase is about 2.5k minified and gzipped. CustomWiggle adds 1.2kb (because CustomEase is a dependency). But actually, all CustomWiggle does behind the scenes is create what's essentially a wiggly SVG <path> (based on the parameters you feed in) that gets fed into CustomEase, so if you need to minimize file size you could create the CustomWiggle locally and have it spit out the raw SVG <path> data string, copy that, and just plug that directly into CustomEase for your production files (removing CustomWiggle as a dependency). 

 

And don't freak your team out with the whole "appendMultiple() is deprecated" thing because the next major release won't drop for months. It's not looming on the horizon super-soon. But yeah, I think they'd be happier using the modern syntax anyway. 

 

Oh, and if you wanted to get really fancy, you could reduce those 11 lines of code to just 1:

 

tl.staggerTo([steering, steering, steering], 1, {cycle:{rotation:[-20,20,0]}, ease:Sine.easeInOut}, 1, 2);

 

 

 

Let us know if you need anything else. 

[explorerzip]

Thanks for the code snip and for the tip on using CustomWiggle to create a raw SVG path. I've just started playing around with the new cycle property and it's a great code saver.

 

It makes sense that old functions like appendMultiple won't be disappearing anytime soon. I'd rather start getting people to change habits now especially if they're not optimal. Better to change habits and processes now instead of waiting for something to break