Jump to content
GreenSock

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

TimelineMax not defined

Recommended Posts

Hi, I have been using TimelineMax/TimelineLight for a few years and usually it is being brought in by rails asset pipeline or as imports in an es6 app. But I started doing some testing locally, due to the complicated nature of my codebase and so i set up a test environment to try out some new things. It is simply way too much code for codepen, dealing with THREE.js and various other technologies, it would be a nightmare to navigate all of this code in one 'pen'. So... I kept getting the error TimelineMax not defined when I try to create a new timeline. I stripped everything out of my testing environment to try to understand if there was a conflict or something. The current minimum amount of code looks like this.

<!DOCTYPE html>
<html>
<head>
    <title>TimelineMax test</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TimelineMax.min.js"></script>
</head>

<body>
<script>
    var tl = new TimelineMax({});
	tl.to("body", .3, {backgroundColor:"blue"});

</script>

</body>
</html>

Can anyone tell me why I would be getting the following error in my console?

Uncaught ReferenceError: TimelineMax is not defined

Share this post


Link to post
Share on other sites

Hi,

 

TimelineMax by itself is not going to work, because GSAP's core is not available. Add TweenLite before TimelineMax and it should work:

 

<!DOCTYPE html>
<html>
<head>
    <title>TimelineMax test</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenLite.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TimelineMax.min.js"></script>
</head>

<body>
<script>
    var tl = new TimelineMax({});
	tl.to("body", .3, {backgroundColor:"blue"});

</script>

</body>
</html>

 

Happy Tweening!!!

  • Like 4

Share this post


Link to post
Share on other sites

Hey, thank you! That worked to remove the error. As a heads up, and not sure if this was just my case, but when I included TweenLite the animations didn't fire. However, once I added TweenMax, everything worked as expected.

 

<!DOCTYPE html>
<html>
<head>
    <title>TimelineMax test</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TimelineMax.min.js"></script>
</head>

<body>
<script>
    var tl = new TimelineMax({});
	tl.to("body", .3, {backgroundColor:"blue"});

</script>

</body>
</html>

 

Share this post


Link to post
Share on other sites
6 minutes ago, catchnewyork said:

That worked to remove the error. As a heads up, and not sure if this was just my case, but when I included TweenLite the animations didn't fire. However, once I added TweenMax, everything worked as expected.

 

That's because you had CSS-based animations ("backgroundColor" is CSS-related), so you need CSSPlugin. That's already INSIDE of TweenMax which is why that worked when you switched to TweenMax. You could have loaded TweenLite and CSSPlugin, but frankly I think it's smarter to just use TweenMax because you get all the goodies and it's extremely well-cached due to its ubiquity. Also, TimelineLite and TimelineMax are also inside TweenMax, so you don't need to load those separately (waste of kb). Just load TweenMax and you're golden ;)

  • Like 4

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×