Uncaught ReferenceError: TweenMax is not defined

[Danish]

Howdy!

First of all let me apologize if this is issue has been dealed before, I couldn't find out where

 

Well, this is my trouble:

I followed the tutorial in this url, but I can't manage TweenMax and get this error: Uncaught ReferenceError: TweenMax is not defined

 

I load this libraries at the markup's bottom:

        <script src="jquery-1.9.1.min.js"></script>

        <script src="TweenLite.min.js"></script>

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

        <script src="EasePack.min.js"></script>

        <script src="CSSPlugin.min.js"></script>

        <script src="main.js"></script>

The main.js has this:

 

$(document).ready(function(){

        animPieza1();

}

 

function animPieza1(){

        var pieza1 = $("#html1_pieza1b");

        TweenMax.to(pieza1, 1, {opacity:0, repeat:-1, yoyo:true});

}

 

Any idea?

 

Best!

[Jonathan]

Hello and Welcome to the GreenSock Forums!

 

I think you forgot the URL link to the tutorial you are following?

 

As far as seeing that error :

Uncaught ReferenceError: TweenMax is not defined

From what i see in the code you posted, it looks like you have 2 scripts TweenLite.min.js and TweenMax.min.js

 

Basically it depends on what your using in GSAP. If your only using a limited amount of features and you are worried about file size you can use TweenLite and just add specific plugins as needed.. like the CSSPlugin, EasePack, etc..

 

TweenMax contains all those goodies like CSSPlugin, EasePack, etc so you just have to include one file

 

Try removing the script tag for TweenMax.min.js or just keep that there and remove the TweenLite.min.js and CSSPlugin.min.js, EasePack.min.js scripts

<script src="jquery-1.9.1.min.js"></script>
<script src="TweenLite.min.js"></script>
<script src="EasePack.min.js"></script>
<script src="CSSPlugin.min.js"></script>
<script src="main.js"></script>

or do this

<script src="jquery-1.9.1.min.js"></script>
<script src="TweenMax.min.js"></script>
<script src="main.js"></script>

You can try to customize the scripts you need by clicking the get GSAP button in the top left sidebar above

• then pick your flavor, JavaScript
• underneath the textarea with the code snippet, click the radio button that displays Customize
• then the Customization panel with slide up and then select the radio buttons to the GSAP script you want to include in your web page or website
• then go to the textarea box and copy and paste the code snippets into your web page or website

TweenMax extends TweenLite, adding many useful (but non-essential) features like timeScale(), repeat(), repeatDelay(), yoyo(), updateTo(), and more. It also activates many extra plugins by default, making it extremely full-featured.

Any of the plugins can work with TweenLite too, but TweenMax saves you the step of activating the common ones like CSSPlugin, RoundPropsPlugin, and BezierPlugin. Since TweenMax extends TweenLite, it can do ANYTHING TweenLite can do plus more.

The syntax is identical. You can mix and match TweenLite and TweenMax in your project as you please, but if file size is a concern it is best to stick with TweenLite unless you need a particular TweenMax-only feature.

 

You can find out more info here in the GSAP DOCs:

 

http://api.greensock.com/js/

http://api.greensock.com/js/com/greensock/TweenLite.html

http://api.greensock.com/js/com/greensock/TweenMax.html

http://api.greensock.com/js/com/greensock/TimelineLite.html

http://api.greensock.com/js/com/greensock/TimelineMax.html

 

hope this helps

[Danish]

Thank you Jonathan, this was fixed

[AlexMorse2016]

Ive got TweenMax loaded to my page, and as soon as I put in this: "var tl = new TimeLineMax();", and then "tl.to();" on an element... I get Uncaught ReferenceError: TimeLineMax is not defined,

 

I was happily doing one of your tutorials but as soon as we removed the delay property on each to() and attempted to use TimeLineMax, this error comes up and no more animation...

 

I tried loading just TweenMax.js, and I tried adding the TimeLineMax.js file as well but the error persists...

 

any advice?

[Carl]

Please make sure your code uses TimelineMax not TimeLineMax.

 

The L should be lowercase.

[Johanna]

I have a similar problem. With Uncaught Reference Error: TimelineMax is not defined. Additionally I have just added the jquery.gsap.js file which is also now not defined. 

 

I am following this tutorial  https://codepen.io/alaricweb/post/single-path-morph-svg I got this working on codepen but am now trying to  rereate this in my own programm to be able to put this animation on a website later.  

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Train Morph</title>
<link href="style/style.css" rel="stylesheet" type="text/css">

<script src="js/main.js"></script>  
    <script src="js/MorphSVGPlugin.js"></script>
    <script src="js/TimelineMax.js"></script>
 <script src="js/TweenMax.min.js"></script>
<script src="js/jquery.gsap.js"></script>

</head>

 

This is the code that is linked in the html file 

 

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js

var morphTimeline = new TimelineMax({ 
    repeat:-1,
  repeatDelay:2
}); 

morphTimeline
  .to('#path1',2,{morphSVG:{shape:"#path2"}})
  .to('#path1',2,{morphSVG:{shape:"#path3"}},"+=2")
.to('#path1',2,{morphSVG:{shape:"#path4"}},"+=2")
.to('#path1',2,{morphSVG:{shape:"#path5"}},"+=2")
.to('#path1',2,{morphSVG:{shape:"#path6"}},"+=2")
  .to('#path1',2,{morphSVG:{shape:"#path1"}},"+=2");
;

this is in my main.js 

 

This might be a simple fix however I am rather new at Javascript so I might be overlooking something very simple. 

Hope this is clear enough and that this is something you can help me with. 

Thank you very much 

 

See the Pen KQwwXV by JoBadger (@JoBadger) on CodePen

 

 

[OSUblake]

Don't put your scripts inside the head. Put them right before the closing </body> tag.

 

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Train Morph</title> 
  <link rel="stylesheet" href="css/style.css">  
</head>
<body>  
  <svg>
    ...
  </svg>
  
  <script src="js/TweenMax.js"></script>
  <script src="js/MorphSVGPlugin.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

 

There is no need for the jquery file. You only need to reference TweenMax and the MorphSVGPlugin files for this. Put your animation code inside the main.js file.

 

Just remember that everything is read from top to bottom. First it needs to read any CSS and HTML/SVG. Then it needs to read the GSAP files. And finally, it needs to read your code.

[Johanna]

Fantastic, thank you very much. That is working now!