Jump to content
GreenSock

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

TweenLite not defined - but it is!

Recommended Posts

    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();

    };

 

 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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 });
      });
Link to comment
Share on other sites

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 :)

  • Like 1
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.
×