Jump to content
GreenSock

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

Emulating CSS3 Step Animation with Timelinelite?

Recommended Posts

Hi there. I'm interested in doing step animation but using the smallest engine you have to offer for GSAP, which is TimelineLite (correct?) 

 

I was wondering if there was an equivelent to something like this 

 

But with GSAP?

 

Really need a light weight solution as most sites are not allowing more than 40k zipped HTML5 packaged files still and CSS3 older browser doesn't compare to Greensocks.. 

 

I did see this 

See the Pen MYdwRP by MAW (@MAW) on CodePen

But TweenMax is HUGE. 

 

Halp?

 

Thanks.

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

Link to post
Share on other sites

Hi sorciereus :)

 

TweenMax.js file size ( gzipped ) is just 25K , is that really huge !...

  • Like 1
Link to post
Share on other sites

Not to me! But that's over half the space if you are working with a 40k limitation. 

Link to post
Share on other sites

Hi,

 

Why don't you use TweenLite and the Ease Pack, together they're 8kb gzipped.

 

You can create the tween to a regular JS object and use an onUpdate callback to pass those values to the element's style.

var target = document.getElementById("my-element"),
    myObject = {a:0},
    t;

t = TweenLite.to(myObject, 1, {a:-2450, ease:SteppedEase.config(16), onUpdate:updateFn, onComplete:repeatFn});

function updateFn(){
  target.style.backgroundPosition = myObject.a+"px 0px";
}

function repeatFn(){
  r.restart();
}
  • Like 5
Link to post
Share on other sites
Not to me! But that's over half the space if you are working with a 40k limitation. 

 

 

We feel your pain. 40kb is just an unrealistic spec from an ancient time (which you clearly know). FWIW we're doing some things that should hopefully end up with you having a much easier time getting GSAP into your ads and having the industry as a whole acknowledge that larger file sizes are necessary when we can't rely on plugins like Flash.

  • Like 1
Link to post
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.

×