Banner Ads for Sizmek in Firefox

[crazy1s]

Hi guys. 

 

Finally got the powers that be to agree to switch over to GreenSock for everything and my first demo project is a few banner ads.

 

All work perfectly except for in Firefox. I've searched and couldn't find anything that fits my scenario so posting new.

 

Here's my script from an expanding ad.

 

 <script>

var $text = $('#text');

var $lock = $('#PadLock');

var $expand = $('#expandButton');

var $close = $('#closeButton');

var $UnlockText = $('#UnlockText');

var $key = $('#ring');

var $CTA = $('#clickthroughButton');

tl = new TimelineLite({paused:true});

tl2 = new TimelineLite({});

 

tl2.to($lock, .5, {rotation: 25, left:'95px', ease:Sine.easeInOut, top:'60px', transformOrigin:"left 50%",})

.to($lock, .5, {rotation: 5, left:'110px', ease:Sine.easeInOut, top:'78px', transformOrigin:"left 50%",})

.to($lock, .5, {rotation: 15, left:'103px', ease:Sine.easeInOut, top:'69px', transformOrigin:"left 50%",})

.to($lock, .5, {rotation: 10, left:'106px', ease:Sine.easeInOut, top:'74px', transformOrigin:"left 50%",});

 

TweenLite.from($text, 2, {left: '-200px', ease:Circ.easeInOut, delay: 1});

TweenLite.from($expand, 1, {bottom: '-50px', ease:Expo.easeIn, delay: 1.75});

 

tl

.from($key, 1.5, {rotation: -180, top: '-300px', left: '500px', ease:SteppedEase.easeIn}, '-=.5')

.to ($UnlockText, 1, {opacity: 1}, '-=.5')

.from($CTA, .75, {bottom:'-136px', ease:SteppedEase.easeInOut, transformOrigin:"left 50%"}, '-=.5')

.from($close, 1, {top: '-40px', ease:Circ.easeInOut});

$("#expandButton").click(function() {

        tl.play();

});

 

 

 

 

</script>

 

I'm sure it's just some tiny thing that Firefox hates and is choking on, but have rewritten almost the entire thing piece by piece to no avail. 

 

Any advice MUCH appreciated.

[joe_midi]

Hey Crazy 1s,

 

Could you make a CodePen example of your animation?

 

It's pretty difficult to give you a definitive answer without seeing what's going on.

 

 

But one thing I can see from your code:

var tl2 = new TimelineLite({});

tl2
  .to($lock, .5, { rotation: 25, left: '95px',  ease:Sine.easeInOut, top: '60px', transformOrigin: 'left 50%' })
  .to($lock, .5, { rotation: 5,  left: '110px', ease:Sine.easeInOut, top: '78px', transformOrigin: 'left 50%' })
  .to($lock, .5, { rotation: 15, left: '103px', ease:Sine.easeInOut, top: '69px', transformOrigin: 'left 50%' })
  .to($lock, .5, { rotation: 10, left: '106px', ease:Sine.easeInOut, top: '74px', transformOrigin: 'left 50%' });

Instead of using left and top, try using x and y, they should prove to give better performance.

var tl2 = new TimelineLite({});

tl2
  .to($lock, .5, { rotation: 25, x: 95,  ease:Sine.easeInOut, y: 60, transformOrigin: 'left 50%' })
  .to($lock, .5, { rotation: 5,  x: 110, ease:Sine.easeInOut, y: 78, transformOrigin: 'left 50%' })
  .to($lock, .5, { rotation: 15, x: 103, ease:Sine.easeInOut, y: 69, transformOrigin: 'left 50%' })
  .to($lock, .5, { rotation: 10, x: 106, ease:Sine.easeInOut, y: 74, transformOrigin: 'left 50%' });