transformPerspective + fromTo in FireFox

[NOEONE 1 Likes (Newbie)]

Newbie here.

 

When using transformPerspective + fromTo and setting alpha:0 to alpha:1 tween never happens.

But if alpha value is never set or alpha is 1 to 1 everything works just fine .

 

This is only in FF.

See the Pen bNWaoP by noeone (@noeone) on CodePen

[Jonathan 5,394 Likes (Superhero)]

Hello NOEONE, and welcome to the GreenSock Forum!

 

I am seeing the element animate with fromTo() .. in Firefox 34 and 35 (Windows 7 PC) .. what Firefox are you seeing this in? .. and is this on a mac or a PC?

 

I also noticed you are using both perspective and transformPerspective on the same element. You wouldn't need perspective on your tween.. since perspective only applies to the elements children, but you have no children...  whereas transformPerspective applies to the element itself.

 

You also might want to use immediateRender:false when using from(), fromTo(), staggerFrom(), or staggerFromTo() tweens, since from() tweens have immediateRender set to true by default.

TweenMax.fromTo(next, 1.5, {
     alpha:0, 
     rotationY: -90, 
     z: 0, 
     rotationX: -180,
     immediateRender: false
    }, {
     alpha:1, 
     x:10, y:150, 
     rotationY: 0, 
     z: 150, 
     rotationX: 0
    }
);

:

Below taken from the fromTo() Docs:

 

NOTE: by default, immediateRender is true in fromTo() tweens, meaning that they immediately render their starting state regardless of any delay that is specified. This is done for convenience because it is often the preferred behavior when setting things up on the screen to animate into place, but you can override this behavior by passingimmediateRender:false in the fromVars or toVars parameter so that it will wait to render the starting values until the tween actually begins.

 

Read more here in the from tween Docs:

 

from() : http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/from/

fromTo() : http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/fromTo/

staggerFrom() : http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/staggerFrom/

staggerFromTo() : http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/staggerFromTo/

 

perspective : https://developer.mozilla.org/en-US/docs/Web/CSS/perspective

transformPerspective : http://css-tricks.com/almanac/properties/p/perspective/

 

Let us know if that helps

[NOEONE 1 Likes (Newbie)]

Im using FF 34 on MAC

I posted a stripped down version of what i'm working on, I do have children but i'm still getting the same results using immediateRender:false

I revised the codepen and it happens on line 84.

[Jonathan 5,394 Likes (Superhero)]

Maybe one of these fine gents who have Firefox on Mac can replicate this issue.. currently i dont have a Mac in front of me to test this. Looks like what your seeing is only in Firefox on Mac, since i did not see this behavior on Windows Firefox 34 and 35.

[Jonathan 5,394 Likes (Superhero)]

Thank you for the example.. very helpful.

 

I just tested your revised codepen and it still animates fine.. i even uninstalled Firefox 35, and reinstalled Firefox 34 and still it animated.. again, this is on Windows 7 (64-bit).

[NOEONE 1 Likes (Newbie)]

my FF just auto updated to v. 35 and it works now. guess it's no longer an issue. I should fire FF a bit more often so it can auto update more often.

 

Thank You Jonathan

[Jonathan 5,394 Likes (Superhero)]

Glad you got it working NOEONE

 

Don't hesitate to ask if you have any more questions.. we are here to help!

 

Happy Tweening!

[Carl 11,326 Likes (Superhero)]

Yeah, I tested in FF35 on a Mac and it worked fine. Kind of strange though that it didn't work in 34. I'm sure we have done plenty of animations like that.

 

One thing I noticed in your pen is that you are just passing the ID into your tweens, but you should use a String selector with the #

 

bad

TweenMax.fromTo(next, 5.5, {alpha:1, rotationY: -90, z: 0, rotationX: -180}, {alpha:1, rotationY: 0, z: 0, rotationX: 0});

 

good (proper string selector)

TweenMax.fromTo("#next",  5.5, {alpha:1, rotationY: -90, z: 0, rotationX: -180}, {alpha:1, rotationY: 0, z: 0, rotationX: 0});

 

Glad its all sorted, and like Jonathan said, come back and ask more questions.

[NOEONE 1 Likes (Newbie)]

Interesting I never used "#divName" before I always used TweenMax.to(myDiv... and worked so I assumed GSAP did the translation.

[Jonathan 5,394 Likes (Superhero)]

NOEONE, The reason divName variable was working is due to the global namespace for id. When you add an id attribute to your DOM elements, the window will load those ID names as global namespaces, part of the DOM window (global-like variables). Its best to avoid that by just explicitly declaring your selector like Carl advised. Even though HTML 4.0 and the new HTML5 specs allow it.. they also advise against it.

• window[name]
  Returns the indicated element or collection of elements.
  As a general rule, relying on this will lead to brittle code. Which IDs end up mapping to this API can vary over time, as new features are added to the Web platform, for example. Instead of this, use document.getElementById() or document.querySelector().

It is not safe to rely on Global variables, and just set your selectors using document.getElementById() or document.querySelector(). GSAP by default uses document.querySelectorAll(), as of 1.13.1

 

Please see the below for more info:

 

http://www.w3.org/html/wg/drafts/html/master/browsers.html#named-access-on-the-window-object

 

I hope this helps!