Jump to content
Search Community

I am such a newbie, my first svg animation is crashing Firefox, but not IE11 or Chrome...plz halp!

HodgeHeg 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

 

I am new to gsap. I am building my first animation which will have a few moving parts. I have made a rainbow from an arc and a gradient. The idea was that the rainbow will burst (using scale) and as it flies past the logo text, the text will fade in. The other main part of the animation is the central flower will bloom from a bud into the finished logo shape, (I haven't animated that yet so the codepen is just dealing with the rainbow and the text). So the animation as it is will work in Chrome or IE11, but not in firefox. If you uncomment out the code at the bottom the animation will play, but don't do that if you are using Firefox as it will crash your tab, at least that is what is happening for me.

 

I was hoping some of you experts could have a look and let me know if you have any suggestions whatsoever. Am I doing this right and the problem is likely to be with firefox or have I made a complete mess of this?

 

I can't believe it works in IE11 but not firefox! I did submit a crash report with some comments, but obviously I still need to get this working somehow.

 

Any help whatsoever would be appreciated!!

See the Pen mjvLwM by coderer1 (@coderer1) on CodePen

Link to comment
Share on other sites

Hi @HodgeHeg :)

 

Welcome to the forum. 

 

It played fine for me in FireFox. (all other browsers too). The only error I saw was your ease on lines 14 &  21. You have this:

 

ease: Expo

 

I'm not sure whether that should have been an easeIn or maybe the new ExpoScaleEase? 

 

I didn't really dive into your SVG, but it all played fine for me. Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

Hi Craig. Thanks for looking at it for me!

 

I fixed the errors you pointed out and finished making the animation. I switched to working in Chrome. It is still crashing my Firefox though :( Since it runs fine for you, at this point I don't know if the problem is just my browser or if I have done something stupid in my code.

 

The animation crashes my firefox tab regardless of whether am running it locally or in codepen.

 

I am running firefox nightly and it still crashes even when running it with add ons disabled. So weird.

 

Am going to have to fix it though because I can't put this on the web if it's going to crash people's browsers! ?

Link to comment
Share on other sites

hmmm... I just looked at it again and it all played fine for me in all browsers. The only thing I see in the SVG is an extra group closing tag (</g>) on line 110. I don't think that would crash FireFox, but weird things happen sometimes.

 

Other than that I guess you can check the usual suspects. Check FF on other machines, update graphics card drivers etc...

 

Just an FYI: you can shorten your code a little by not using the add() method to add tweens to the timeline.

 

//this
tl.add(TweenLite.to(rainbowPTop, 5, { 
  scale:85,
  transformOrigin: "50% 100%",
  ease: Expo.easeOut,
}), 2.5);

// could be shortened to this
tl.to(rainbowPTop, 5, { 
  scale:85,
  transformOrigin: "50% 100%",
  ease: Expo.easeOut,
}, 2.5);

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

Thanks for helping me! I ended up reinstalling firefox. Not using nightly, just the stable channel. Refreshed it and got rid of a bunch of add ons. Now it works without crashing! I don't know enough about how the guts of a broswer works to know what was going wrong. I just have to hope that it is all stable enough for using in production. Thanks for the tip, I will go and amend the js so that it is tidier. As I said am just a newbie so I have a lot to learn about gsap and js in general. This is my first svg animation ever and am pleased with it and pleased with how easy it was with gsap.

 

Thanks again!

Link to comment
Share on other sites

24 minutes ago, HodgeHeg said:

I just have to hope that it is all stable enough for using in production.

 

There's nothing unusual or complicated about your animation. Firefox nightly is unstable, and probably not a good idea to use for testing production code. 

  • Like 4
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...