Jump to content
Search Community

Tweenmax or Tweenlite

psntrtr test
Moderator Tag

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

Dear GSAP users,

 

I found a codepen that reproduces exactly what I wanted to do, having an element following my mouth with the GSAP smooth feeling. But I was wondering why that code wouldn't work with the tweenlite library but only with the tweenmax library?

 

Thank you in advance for your time. I'm sorry if the question is stupid, but I'm confused because the code it's using "tweenlite" as a function.

 

See the Pen kepDb by grayghostvisuals (@grayghostvisuals) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Not a stupid question.

 

TweenMax is a single JS file that loads many different tools, among them are TweenLite and CSSPlugin.

 

Once you load TweenMax.min.js you can create TweenMax or TweenLite tweens because TweenLite is included in TweenMax.

 

In the example you referenced the code is trying to animate the css left and top properties of a DOM object.

In order to do that CSSPlugin is necessary. Since TweenMax is loaded, that demo has access to CSSPlugin also.

 

We lean towards recommending loading TweenMax because it includes all the stuff you need on 90% of your projects in one file.

 

If you want go very lean, you can load TweenLite AND CSSPlugin separately locally or from these CDN urls

 

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

 

Here is a forked version of that demo that loads TweenLite and CSSPlugin

See the Pen rKgRBo?editors=0010 by GreenSock (@GreenSock) on CodePen

 

If you haven't seen it yet, check out our updated Getting Started guide as it gives an explanation of what CSSPlugin does and why its necessary.

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Thank you very much for the very fast and detail answer. Very clear!

 

I just wanted to avoid loading to much extra library. But as it is on cloudfare I guess I can simply go with the two libraries.

 

Again thank you very much!

 

  • Like 1
Link to comment
Share on other sites

For the record, you may find that loading TweenMax may actually be FASTER (even though it's technically bigger than TweenLite + CSSPlugin). It's common for people to get way too focused on sheer kb and miss a bunch of other factors like the number of requests, latency, ubiquitous caching, etc. See https://greensock.com/kilobyte-conundrum for more thoughts. :)

  • 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.
×
×
  • Create New...