Jump to content
GreenSock

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

Importing Timeline/TweenLite, but it's not working

Go to solution Solved by padders,

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

Hey there,

I am pretty sure, someone asked this before and it's explained somewhere. I just don't find it.

In the provided codepen, please check the JS imports. It's only TweenLite.
Why doesn't it work like this?

I tried importing TimelineMax only, too, then added a

var tl = new TimelineMax();

Nope...

How can I make good use of the smaller libs?

Thanks guys,
Laser

See the Pen meQKxw by anon (@anon) on CodePen

Link to comment
Share on other sites

I think you need to add the CSSPlugin as well if you just want to use TweenLite. Add the line below as an external javascript resource. It works for me when I do that.

https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js

I'm not sure about the EasePack, you may need that too if you want to use eases.

https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js 
  • Like 2
Link to comment
Share on other sites

Hey. Ok, that works. But what about the TimelineMax version? I still can't get it to run without importing TweenMax. Any clues?

See the Pen RWqBOE by anon (@anon) on CodePen

 -> console error

Link to comment
Share on other sites

  • Solution

I think you'll need to add the following resources.

https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js

https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js

If you look at the download link on the GSAP homepage, then select custom and tick the TimeLineMax checkbox, it selects the items you need to import and lists the imports at the top.

  • Like 2
Link to comment
Share on other sites

Hi Lasercode  :)

 

yep , as padders mentioned correctly , you need to load at least TweenLiteCssPlugin to animate DOM elements .

you can tween any obj property with TweenLite , so it's absolutely possible to animating DOM css properties just with TweenLite but you should to define css prefixes for all browsers + consider browser bugs like Firefox(specially with svg) and stupid IE +...

 

i don't think that's really worth to do !...

 

do you really have problem with GSAP file size !?

 

TweenLite (9kb)
css (15kb)
TimelineMax (6kb)
  • Like 1
Link to comment
Share on other sites

I had some problems with the file you did not mention (TweenMax) and did not know how to get those other smaller libs to work. Now I do. Question solved. Thank you all.

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