Jump to content
Search Community

TweenNano equivalent

friendlygiraffe 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

Hi, as a heavy TweenNano user in Flash, I was wondering what the smallest equivalent is for packaging GSAP would be?

 

Assuming I would just want to do something as simple as:
TweenLite.to("#test" , 4, {alpha:1});

Would I need both TweenLite.min.js and CSSPlugin.min.js for that? Or is there a smaller solution?

 

Thanks

 

See the Pen vGPbRV by friendlygiraffe (@friendlygiraffe) on CodePen

Link to comment
Share on other sites

I echo Patrick's excellent advice. With CDN hosting and browser caching the amount you save in total kb would be trivial, especially since the size of TweenMax.min.js is only around 34kb and most ad networks exclude it.

 

But yes, using the minified versions of TweenLite and CSSPlugin would be the lightest GSAP solution. 

  • Like 2
Link to comment
Share on other sites

I echo Patrick's excellent advice. With CDN hosting and browser caching the amount you save in total kb would be trivial, especially since the size of TweenMax.min.js is only around 34kb and most ad networks exclude it.

 

But yes, using the minified versions of TweenLite and CSSPlugin would be the lightest GSAP solution. 

Thanks, yes I normally use CDN links, but the specs I am working on do not allow that.

 

TweenLite.min.js is about 27k
CSSPlugin.min.js is about 40k
 
Would I need to include both of these files to do something as simple as an alpha/opacity fade Tween?
Link to comment
Share on other sites

 

Thanks, yes I normally use CDN links, but the specs I am working on do not allow that.

 

TweenLite.min.js is about 27k
CSSPlugin.min.js is about 40k
 
Would I need to include both of these files to do something as simple as an alpha/opacity fade Tween?

 

Typically (for every major ad serving company) only the zipped filed size is counted, which is a lot smaller.  If you're using AdWords, they do allow the Google-hosted CDN links now: 

https://s0.2mdn.net/ads/studio/cached_libs/tweenlite_1.18.0_56fa823cfbbef1c2f4d4346f0f0e6c3c_min.js
https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js
https://s0.2mdn.net/ads/studio/cached_libs/cssplugin_1.18.0_71489205621d46cbe88348eeb8fe493f_min.js
https://s0.2mdn.net/ads/studio/cached_libs/easepack_1.18.0_ed5816e732515f56d96a67f6a2a15ccb_min.js

But if you're can't use CDN links & you're really tightly restricted (& only doing simple animation) maybe you could just use CSS transitions?

Link to comment
Share on other sites

ok the the 'zipped' size is what I should be looking at?

 

In that case it's only 27k for TweenLite.min & CSSPlugin.min - Which is usable

 

Unfortunately CDN is absolutely out the equation, CSS transitions are clunky to change. 

 

Unless there is a greensock tool for CSS transitions?

Link to comment
Share on other sites

CSS transitions are clunky to change. 

 

 

Absolutely!

 

Unless there is a greensock tool for CSS transitions?

 

 

Nope. transitions have way too many limitations and even if we did use them you would still probably need a tool like CSSPlugin to manage them.

 

If you absolutely have no wiggle room with the filesize or CDN and you ONLY want to do opacity tweens, I guess you could do something like:

 

 
//these objects store references to a DOM element and opacity
var greenObj = {opacity:1,
               element: document.querySelectorAll(".green")[0]};


var orangeObj = {opacity:1,
                element: document.querySelectorAll(".orange")[0]};


//this function animates the opacity of the above objects to any value with an optional delay
function fade(obj, endOpacity, delay) {
  TweenLite.to(obj, 1, {opacity:endOpacity, onUpdate:setProps, onUpdateParams:[obj], delay:delay || 0})
}


//this finds the element and gives the newly tweened opacity value
function setProps(obj) {
  obj.element.style.opacity = obj.opacity;
}


//easy fade sequence
fade(greenObj, 0, 0) //fade greenObj to 0 with 0 delay
fade(orangeObj, 0, 1) //fade orangeObj to 0 with 1 second delay
fade(greenObj, 1, 2)
fade(orangeObj, 1, 3

 

http://codepen.io/GreenSock/pen/MydOoJ?editors=0010

 

Frankly, I don't recommend using this approach as its so limiting and time consuming. 

  • Like 1
Link to comment
Share on other sites

I wish I had more specs!

 

Could you elaborate on the specs for your project?

I am curious to know what you are building. That might help guide a proper solution.

 

 Agreed, but this helps a lot, thanks!

 

Absolutely!

 

 

Nope. transitions have way too many limitations and even if we did use them you would still probably need a tool like CSSPlugin to manage them.

 

If you absolutely have no wiggle room with the filesize or CDN and you ONLY want to do opacity tweens, I guess you could do something like:

 

 
//these objects store references to a DOM element and opacity
var greenObj = {opacity:1,
               element: document.querySelectorAll(".green")[0]};


var orangeObj = {opacity:1,
                element: document.querySelectorAll(".orange")[0]};


//this function animates the opacity of the above objects to any value with an optional delay
function fade(obj, endOpacity, delay) {
  TweenLite.to(obj, 1, {opacity:endOpacity, onUpdate:setProps, onUpdateParams:[obj], delay:delay || 0})
}


//this finds the element and gives the newly tweened opacity value
function setProps(obj) {
  obj.element.style.opacity = obj.opacity;
}


//easy fade sequence
fade(greenObj, 0, 0) //fade greenObj to 0 with 0 delay
fade(orangeObj, 0, 1) //fade orangeObj to 0 with 1 second delay
fade(greenObj, 1, 2)
fade(orangeObj, 1, 3

 

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

 

Frankly, I don't recommend using this approach as its so limiting and time consuming. 

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