Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Hysteresis

Timelines not working in Firefox 35.0.1

Go to solution Solved by Hysteresis,

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

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

  • Solution

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();
}); 
Link to comment
Share on other sites

  • 7 months later...

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");
}
}

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

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.
×