Getting reference error using TweenLite

[Weegle]

Hello,

 

I'm trying to use GSAP to make animations but I keep getting an error saying that TweeLite is not defined.

I tried typing window.TweenMax in my console and it resulted in "undefined".

 

Obviously, TweenMax is not loading but I tried loading it from the site, from local harddrive and it keeps failing.

 

I used

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>

and

<script src="../js/gsap/TweenMax.js"></script>

 

Any ideas ?

 

Thanks

See the Pen VjbyRX by Weegle (@Weegle) on CodePen

[Carl]

Hi and welcome to the GreenSock forums.

 

From looking at your code it appears you are loading test.js BEFORE you load TweenMax. You need to switch the order around. TweenMax has to load before your custom code can reference it.

 

Thanks for the CodePen demo. 2 things to keep in mind.

 

You don't need any of the head or body tags in the HTML panel. CodePen adds them for you.

To add scripts use the gear icon at the top of the JS panel. 

 

I added TweenMax for you here: https://codepen.io/GreenSock/pen/GqmxXW Your TweenLite code is good.

 

[casizzi]

Hi im getting the same thing but my code looks fine, 

 

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

};

[Carl]

Hi casizzi,

 

Looks like you started a new thread (which was a good idea).

 

http://greensock.com/forums/topic/15006-tweenlite-not-defined-but-it-is/?hl=define

 

Best to keep the conversation in one place so I'll be locking this one.