Jump to content
GreenSock

catchnewyork

TimelineMax not defined

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

Link to comment
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 5
Link to comment
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>

 

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

  • 4 years later...
On 6/25/2018 at 9:45 PM, Rodrigo said:

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!!!

hi ,

how to import TweenLight ,TweenlineMax  in react js

Link to comment
Share on other sites

Hi there - TweenLight is old and I'm uncertain whether there's a way to get it to work nicely with ESModules and npm like React setups usually prefer. Is there a reason you aren't just using GSAP?

https://greensock.com/docs/v3/Installation

Link to comment
Share on other sites

Yeah, there's absolutely no reason to ever use the old/legacy TweenLite/TweenMax/TimelineLite/TimelineMax stuff in a new project. It's waaaay better to just use the newer, simpler "gsap" syntax. 

 

If you're trying to convert a legacy project, see:

 In your code, you'd just change new TimelineMax() to gsap.timeline()

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.
×