Timelines not working in Firefox 35.0.1

[Hysteresis 2 Likes (Newbie)]

I have an issue in Firefox. The timelines are not playing. If you click on 'Start X-Ray/Calibration' and 'Select Start' and any of the steps below, a timeline should play. It works great in Chrome and IE, not Firefox.

 

I am using SVGs (mainly for positioning and scaling) and basically just showing and hiding elements within SVGs.
 
An example of the code in question is:

 

TweenLite.to('#glow1, #glow2, #glow3, #startBtn2, #okayBtn1, #okayBtn2, #stopBtn, #calibrate, #yesBtn, #operatorBtn1, #barHighlight', 0, {autoAlpha:0});


var popover1 = new TimelineMax({paused: true});
popover1.fromTo('#glow1', .3, {autoAlpha:0}, {autoAlpha:1})
.fromTo('#glow1', .2, {autoAlpha:1}, {autoAlpha:.3})
.fromTo('#glow1', .2, {autoAlpha:.3}, {autoAlpha:1})
.to('#glow1', .2, {autoAlpha:0})
.to('#baseImage1', 0.4, {autoAlpha: 0.3})
.fromTo('.col-9', .4, {background:'rgba(180, 180, 180, 0.0)'}, {background:'rgba(180, 180, 180, 1.0)'})
.fromTo('#popover1', .8, {autoAlpha:.15, scale: 0.08, x: 679, y: 174}, {autoAlpha:1, scale: 1, x: 0, y: 0})
.to('#stopBtn', .2, {autoAlpha:1, scale: 1.5, delay: .5, transformOrigin:"center center"})
.to('#stopBtn', .2, {autoAlpha:0, scale: 1, delay: .5, transformOrigin:"center center"})
.to('#stopBtn', .2, {autoAlpha:1, scale: 1.5})
.to('#stopBtn', .2, {autoAlpha:0, scale: 1, delay: .5, transformOrigin:"center center"});


$("#overlay20Link, #dotNav2 .page20").click(function(){ 
TweenLite.to('#popover2, #popover3, #popover4, #popover5, #popover6, #popover7, #popover8', 0, {autoAlpha:0});
popover1.restart();
yes.pause();
calibrate.pause();
popover2.pause();
popover3.pause();
okay2.pause(); 
}); 

 

Other GSAP animations run fine on the same page, it's just these timelines triggered with restart(); that are not working...

 

navigation.js also contains GSAP code for global controls...

 

Any suggestions? Thanks in advance!

See the Pen JopNjP by dchadney (@dchadney) on CodePen

[Carl 9,066 Likes (Superhero)]

Sorry to hear you are having trouble.

 

Unfortunately we can not sift through 8 timelines and nearly 200 lines of code hunting for an issue.

I looked at this on FF 35.0.1 on a MAC and I saw things animating when I followed your instructions, but I can not compare it to Chrome and try to find the differences.

 

Please provide a reduced test case. If a Timeline is not restarting or animating... just include enough html, css and javascript to show us that single problem.

 

It is extremely rare that an issue can not be replicated with a single timeline and 1 or 2 divs.

 

Thanks

[Hysteresis 2 Likes (Newbie)]

Hi Carl, thanks for your reply. I understand, that is why I provided the code in question within the post.

 

At any rate, I figured out what was causing the problem. If I move the timeline into .click(function() then it works fine. No idea why that would be a problem, but I got it resolved.

 

Thanks,

Dan

var popover1 = new TimelineMax({paused: true});

$("#overlay20Link, #dotNav2 .page20").click(function(){ 
popover1.fromTo('#glow1', .3, {autoAlpha:0}, {autoAlpha:1})
.fromTo('#glow1', .2, {autoAlpha:1}, {autoAlpha:.3})
.fromTo('#glow1', .2, {autoAlpha:.3}, {autoAlpha:1})
.to('#glow1', .2, {autoAlpha:0})
.to('#baseImage1', 0.4, {autoAlpha: 0.3})
.fromTo('.col-9', .4, {background:'rgba(180, 180, 180, 0.0)'}, {background:'rgba(180, 180, 180, 1.0)'})
.fromTo('#popover1', .8, {autoAlpha:.15, scale: 0.08, x: 679, y: 174}, {autoAlpha:1, scale: 1, x: 0, y: 0})
.to('#stopBtn', .2, {autoAlpha:1, scale: 1.5, delay: .5, transformOrigin:"center center"})
.to('#stopBtn', .2, {autoAlpha:0, scale: 1, delay: .5, transformOrigin:"center center"})
.to('#stopBtn', .2, {autoAlpha:1, scale: 1.5})
.to('#stopBtn', .2, {autoAlpha:0, scale: 1, delay: .5, transformOrigin:"center center"});
popover1.restart();
}); 

[Math 1 Likes (Newbie)]

Hi,

 

Actually having a similar problem at the moment with timelines that donot play in Chrome ( 45.0.2454.101)and Firefox (41.0.1)

In IE (11.010.240) all plays as supposed too...

I probably overlook something simple, because another timeline is playing properly...

 

This is the evil-doer:

 

function changeTextfields(){

var tmpObj;
var tlTextfields = new TimelineMax();



for(var i = 0; i < iTextsArr.length;i++){
 
tfPart2 = iTextsArr.id;
//alert("tfPart2: "+tfPart2);
tmpObj = eval(tfPart1+tfPart2+tfPart3);
tlTextfields.to(tmpObj, 0.5, {rotation:getRandomNum(65,-65)},"-=0.25*i");
tlTextfields.to(tmpObj, 0.5, {rotation:0},"-=0.25*i");
tlTextfields.to(tmpObj, 0.5, {rotation:getRandomNum(65,-65)},"-=0.25*i");
tlTextfields.to(tmpObj, 0.5, {rotation:0},"-=0.25*i");
}
}

 

Making all textfields rotate shortly...

 

And this  is a similar timeline..that does work in IE, FF and Opera... what do i miss??

 

function tweenArray(){

var tlChar = new TimelineMax();



for(var i = 0; i < iSpritesArr.length;i++){
    tlChar.to(iSpritesArr, 0.75, {autoAlpha:0.45,scale:0.5},"-=0.35*i");
}
}

[Math 1 Likes (Newbie)]

Guess it has to do with difference in type of elements... chars are images..and thus all works in all browsers the same..

The textfields apparently have issues with some properties of the tweens.

 

I tried this:

 

tlTextfields.to(tmpObj, 0.75, {autoAlpha:0.45,scale:0.5},"-=0.35*i");
//tlTextfields.to(tmpObj, 0.5, {rotation:35});

 

rotation and scale dont work on the textfields...so i suppose i need to use css transformations to get those working crossbrowser. autoAlpha works... the others not.

[Carl 9,066 Likes (Superhero)]

Hi Math,

 

Please provide a reduced test case in CodePen. Its nearly impossible to troubleshoot issues like this without seeing it in action.

The less code the better.

 

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

 

--

 

For future reference: It's better to start a new thread than to add to an old thread that is already marked as answered. No biggie.

[Math 1 Likes (Newbie)]

Hi Carl, i know.  Problem though is that in this case it is a Lectora based project and since Lectora generates html and css i am not sure if i can recreate the situation with a codepen. And even if i could, the issue might be unexisting in a standalone codepen... or a solution working might not work when combining it in Lectora. But well we wont know if i dont use a codepen to recreate something like it at least...so gonna give it a try

 

Thx in advance,

Math