TweenLite not defined - but it is!

[casizzi 0 Likes (Newbie)]

    Any ideas on why I am getting the error that TweenLite is not defined here? I have tested with over code that it definnetly is but for some reason when using the below it wont work?

 

    define(['jquery', 'TweenLite', 'TimelineLite', 'gsapCss', 'gsapJquery'], function ($) {'use strict';});

 

    var slide = TweenLite.to(1.25, {x:-150, ease:Power4.easeInOut, onUpdateParams:[".box_2"], paused:true});

 

    $(".box_2").hover(over, out);

 

    function over() {

      slide.play();

    };

 

    function out() {

    slide.reverse();

    };

 

 

[Jonathan 5,394 Likes (Superhero)]

Hello casizzi, and Welcome to the GreenSock forum!

 

Sorry your having an issue. It looks like you are using requireJS or amdJS to include TweenLite, is that correct?

Please standby while we look into this, Thanks!

[casizzi 0 Likes (Newbie)]

Yes require.js, i have a work around which is the below, which does the same thing and works but just isnt as tidy or compact, the only problem is that in manually reversing the initial tween (using x, y position) the reversal in the second tween takes place from the end point of the first tween animation and not from the current position of the first tween at the point of mouseleave

 

define(['jquery', 'TweenLite', 'TimelineLite', 'gsapCss', 'gsapJquery'], function ($) { 'use strict';});

 

var $div_1 = ('.div_1')

var $element_2 = ('.element_2');

 

  $('.div_1').mouseenter(function(){

      console.log("runs");

      TweenLite.fromTo($element_2, 1, {x:0, ease:Power4.easeIn }, {x:-150, ease:Power2.easeOut});

   });

 

    $('.div_1').mouseleave(function(){

        console.log("runs");

        TweenLite.fromTo($element_2, 1.5, {x:-150, ease:Power2.easeIn }, {x:0, ease:Power4.easeOut });

      });

[Jonathan 5,394 Likes (Superhero)]

Hello casizzi, and welcome to the GreenSock forum!
 

Do you mind setting up your code example in codepen so we can test your code context. it will help us to visually see what is going on

 

 

And since you are using from tweens (fromTo) .. from tweens run immediately by default. You can try and add immediateRender:false to your tweens. But this video tut about immediateRender can help:

 

 

Thanks