Jump to content
GreenSock

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

Yoyo plugin together with TweenLite?

Recommended Posts

Hi,

 

Working on some banner ads, where filesize is important, I was wondering if it is possible to use the yoyo effect without loading TweenMax.min.js . At the moment it's the only effect I'm using TweenMax for, but it's an extra 76 kb if I'm not mistaking.

I included a codepen demo where I built the yoyo effect as a TweenLite sequence, but it's not very beautiful to copy paste this every time I want a similar effect.

Been looking around at the forum, but can't really find a solution (Using the CDN links is of course an option, I know). Thanks in advance,

 

Wouter

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

Link to comment
Share on other sites

Hi Tookster  :)

 

you can use a simple For Loop , something like this :

 

var tl = new TimelineLite()

function Yoyo(){
  for (i = 0; i < 4 ; i++) { 
    tl.to("#redBox",.4,{scale:1.4,ease:Sine.easeOut}).to("#redBox",.4,{scale:1,ease:Sine.easeIn})
  };
}

Yoyo();
Link to comment
Share on other sites

No, it isn't an extra 76k. According to my grunt task runner, the entire gzipped size of TweenMax is under 23kb. http://prntscr.com/5qymtjPerhaps you were looking at the non-gzipped number. Most servers gzip things these days. 

 

Diaco's solution is solid. You can just parameterize the target (and maybe the number of iterations) in that function and you're good-to-go. 

  • Like 1
Link to comment
Share on other sites

Thanks Diaco and Jack.

I'm kinda new to JavaScript but Diaco's solution looks great.

@Jack, how would I use the gzip file? Use the regular TweenMax.min.js for the concept (to show the client) and check if the platform (where the banner ads are sended to) if they gzip the files (automatically)?

Link to comment
Share on other sites

Right, you'd use the minified version always, and then the server gzips it as part of the way it serves the files to browsers. It's not like you have to use a different "gzipped" file or something. It gzips the minified file server-side. 

 

Happy tweening!

Link to comment
Share on other sites

Thanks Jack.

Btw, just talked to the tech-guys at the platform and they said it's fine to use the CDN. Thought they wanted to keep these kind of things in there own hand or something, but I was wrong. Saves me a bunch of kb's :)

Still good to know about gzip though.

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