Slide in effect not working in FireFox?

[1DMF]

Hi,

 

I have the following...

 

 

tl.from(ad, 1, {top:"-=800px", alpha:0, ease:Power3.easeIn})

 

noting fancy, just animate for 1 second starting from off screen (-800px), increasing visibility.

 

So the affect is to slowly make visible while sliding in from the top to rest in the middle of the screen.

 

It works in IE, Opera and Chrome, but not in FireFox?

 

FF just shows the apha opacity effect, but doesn't slide in from the top?

 

The element has this CSS...

 

 

#Splash_Header {
    background: url('https://mydomain/images/splash/splash_Feb_2014.png')  no-repeat;
    height:600px;
    width:800px;
    position:relative;
     
}

 

Your input is appreciated.

1DMF.

[Jonathan]

Hello 1DMF,

 

Try adding the special property immediateRender: false to your Tween.

 

from() tweens render immediately by default: from(), fromTo(), staggerFrom(), staggerFromTo(),

 

Example:

See the Pen lrbGa by jonathan (@jonathan) on CodePen

 

Taken from GSAP Docs:
 

immediateRender : Boolean - Normally when you create a tween, it begins rendering on the very next frame (update cycle) unless you specify a delay. However, if you prefer to force the tween to render immediately when it is created, set immediateRender to true. Or to prevent a from() from rendering immediately, set immediateRender to false. By default, from() tweens set immediateRender to true.

 

Does that help?

[1DMF]

I changed it to

    tl.from(ad, 1, {immediateRender:false, top:"-=800px", alpha:0, ease:Power3.easeIn})

 

Hasn't made any difference?

 

However, changed it to this...

 

 

    tl.from(ad, 1, {y:-800, alpha:0, ease:Power3.easeIn})

 

And now it is working in all 4 browsers?

 

Is there something wrong with 'top' ?

 

Also any reason why the following animation is so jerky in FireFox and Chrome?

 

 

    var fm = $("#mmr_form");   
    var lg = $("#mmr_legend");
    var sl = $("#mmr_venue");
    var sb = $("#mmr_submit");
    var ad = $("#Splash_Header");
   
    tl = new TimelineLite();
 
    tl.from(ad, 1, {y:-800, alpha:0, ease:Power3.easeIn})
    .from(fm, 0.5, {y:"-=30", rotation:"60deg", ease:Back.easeOut},1)
    .from(sb, 0.5, {rotation:"360deg", ease:Back.easeOut})
    .from(sl, 0.5, {width:"0px", alpha:0    }, "-=0.4")
    .from(lg, 0.5, {rotation:"-360deg", alpha:.5, ease:Power3.easeIn},"-=0.7");

 

Regards,

1DMF

[Jonathan]

Is there a way you can setup a codepen example so we can see your code thats not working or that is working to better help you? Or  fork my example from above.

 

Im not sure why that is without seeing your code in context.

 

You can go to this link to see how to setup a codepen demo example:

 

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Thanks

[1DMF]

Hi Jonathan,

 

No, I have major issues with codepen in IE, and it's too complicated for me to just pick up....

 

This is easier... https://www.homeloanpartnership.com/test2.html

 

Hope it's ok.

 

Clearly shows top doesn't work in FireFox but does in IE, Opera & Chrome.

 

Simply change it to 'y:-800' , https://www.homeloanpartnership.com/test3.html

 

And it works fine in all 4 browsers?

 

Something is definitely amiss?

 

Regards,

1DMF

[Jonathan]

When viewing codepen in IE8, you can only view the codepen example in FULL mode.

 

Other versions IE, should be ok in codepen, if not what version of IE is not working in codepen?

 

Top does work in Firefox.. but i think it has to do with what tag your animating and the default CSS properties that are on that tag by default.

 

Like i see you animating a TD tag. Is there any reason you cant just make your id #Splash_Header be a div that is within that TD tag. And animate that div instead.

 

The reason i advise that is because your animating a TD tag that is part of a nested table. I would not animate the table cell (td) but animate a div within that table cell (td).

 

TD tags have a default display property of table-cell. And even though your applying position relative to  that TD tag, its being taken out of the document flow with no parent that its relative too. Does that make sense?

[Carl]

Well it looks like you are trying to change position of <td> tag which seems kind of odd to me. I'm guessing FireFox isn't cool with that.

 

Try this: 

 

Take the GSAP animation completely away.

 

Change your css to this

 

#Splash_Header {

    height: 600px;

    width: 800px;

    position: relative;

    background: url('/members/images/splash/MMR_Training_Feb2014.png') no-repeat scroll 0% 0% transparent;

    top: 400px;

}

 

Does setting the top value have any effect? It didn't for me when using the dev tools in FF

[Carl]

Yup, top:400px (or any position) isn't going to affect a <td> in FireFox: http://codepen.io/anon/pen/pxiAC

 

As you can see, it really helps to see all the code.

 

Definitely check out the video Jonathan recommended. The 5 minutes it takes to learn CodePen can save a lot of time in the future.

[1DMF]

Thanks guys, glad to know I was right and it is an issue with FireFox.

 

I know the page is using <table> for layout, but the splash screen is actually embedded in a much larger page, which I cannot show, it is a corporate members only extranet, and all code cannot and should not be shared.

 

A re-write is currently underway, hence playing with GSAP, looking to replace JQuery UI, where I will also be cleaning up some of the bolted on functionality that has been added over the years.

 

I am also going to DevWeek and looking at knockout.js, so there is much to learn and no time to do it.

 

So yes perhaps someone without dyspraxia could learn codepen in 5 minutes, unfortunately for me, I have other priorities, that take enough time to learn as it is.

 

Interesting that 'y' works and 'top' doesn't, I thought in GSAP they were synonyms?

 

Anyway, I have realised my faux pas, I even called the variable 'ad' for advert, and then assigned the wrong element to it, If you look '#advert' is a div, d'oh!

 

I've updated the test2 , and it works fine using 'top' in all browsers.

 

Thanks for the input, do I assume you can't animate <li> as they are part of <ul> just as <td> is part of <tr> and <table>.

 

I guess what you're trying to tell me is, would it work with straight CSS, if not,  then neither will GSAP and that particular CSS attribute.

[Carl]

Yes, GSAP (for the most part) is simply modifying CSS values over time to create animation. If the particular browser doesn't honor those CSS values, then the animation won't work. The values will still change, but the browser won't render any changes. 

 

It is perfectly fine to animate <li> elements. 

http://codepen.io/GreenSock/pen/exGbj

http://codepen.io/GreenSock/pen/yelzn

 

 

Tables are ancient and have a very rigid structure to create a grid of cells in rows and columns. Offsetting the top value of a single cell was probably never part of the plan. I find it more odd that some browsers allow than the fact that FireFox doesn't. Just one of those things most people probably don't know about until they stumble into it.

 

Glad to hear you got things figured out. Good luck with the project. 

[1DMF]

Hi Carl,

 

 

 

I find it more odd that some browsers allow than the fact that FireFox doesn't.

 

Oh I totally agree, FF was being its usual anally standards compliant!

 

It's just unusual to come across something that works in all browsers except FF!

 

Armed with the 'position' requirement and 'would it work with straight CSS', knowledge, it is going to make it much easier from now on.

 

Thanks for everyone's input , much appreciated.