Jump to content
Search Community

Banner Ads for Sizmek in Firefox

crazy1s 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 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.
Link to comment
Share on other sites

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%' });
  • Like 1
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...