CODEWITHSUNDEEP
animationgsap
Tjoerie
Tjoerie

Reputation: 25

GSAP Tweenlite tweens will not ease

I am building a animated banner with GSAP, the basic animations work fine but the tweens will not ease and will stop functioning altogether when adding further ease statements like bounce.

I am using this piece of code to animate all the stuff.

 <script type="text/javascript" src="js/TweenLite.min.js"></script>
 <script type="text/javascript" src="js/CSSPlugin.min.js"></script>
    <script>
        window.onload = function(){
            var logo = document.getElementById("logo");

            TweenLite.to("#logo", 1, {left:"90px"});
            TweenLite.from("#container", 0.50, {left:"-400px",opacity:0,delay:1});
            TweenLite.from("#control", 1, {scale:0,opacity:0,delay:2});
            TweenLite.from("#cta", 0.15, {scale:0,opacity:0,delay:3.5,ease: Bounce.easeOut,});
        }
    </script>

Am I missing something? Its frustrating me to bits.

Upvotes: 0

Views: 1771

Answers (1)

Jack
Jack

Reputation: 2970

I see two problems:

1) There's an extra comma after your ease:

//BAD:
TweenLite.from("#cta", 0.15, {scale:0,opacity:0,delay:3.5,ease: Bounce.easeOut,});

//GOOD: 
TweenLite.from("#cta", 0.15, {scale:0,opacity:0,delay:3.5,ease: Bounce.easeOut});

2) The Bounce ease isn't in the core TweenLite file - you need to either load EasePack or just TweenMax (which includes TweenLite, CSSPlugin, EasePack and a bunch of other stuff). If you're worried about file size, it should be a non-issue because TweenMax is whitelisted on every major ad network (meaning its file size is free), and it's probably the most widely cached file in ads across the web.

Little tip: if you haven't tried the TimelineLite or TimelineMax tools (also part of GSAP), you'll love them especially for ads. They'll make it so much easier to manage your timing and experiment and skip to different portions of the animations while you're working. Your code could be more concise with them too: 

window.onload = function(){
    var tl = new TimelineLite();
    tl.to("#logo", 1, {left:90})
      .from("#container", 0.5, {left:-400, opacity:0})
      .from("#control", 1, {scale:0, opacity:0}, "+=0.5")
      .from("#cta", 0.15, {scale:0, opacity:0, ease: Bounce.easeOut}, "+=1.5");
}

Now you can tweak the timing of any of the individual animations and the changes will cascade down to the rest. Like if you need to make the first tween 0.5 seconds longer, you don't have to then edit all of the "delay" values of subsequent tweens. Plus now you've got one TimelineLite object that you can pause(), seek(), reverse(), timeScale() or whatever you want. It'll open entirely new possibilities workflow-wise for you.

Might interest you: https://greensock.com/position-parameter https://greensock.com/sequence-video

Also keep in mind there's a great community in the forums at https://greensock.com/forums that's dedicated to helping with GSAP-specific questions.

Happy tweening!

Upvotes: 3

Related Questions