Emulating CSS3 Step Animation with Timelinelite?

[sorciereus]

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

[Diaco]

Hi sorciereus 

 

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

[sorciereus]

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

[Rodrigo]

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();
}

[Carl]

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.