Jump to content
Search Community

SVG Scrolltrigger animation glitching on Firefox

Pauline Brothier test
Moderator Tag

Go to solution Solved by Pauline Brothier,

Recommended Posts

Hi guys, 

I created an animation using Lottiefiles and Scrolltrigger, a bit like the codepen one, which works fine on Chrome and Safari, but not on firefox : https://dev.bklt.fr/test/new.html

Apparently Firefox doesn't handle the svg animation very well, but I need this animation to be in svg (not canvas). 

I tried to optimize my images and my json file, but it changes nothing. 

Do you ever have this issue? Maybe there is something in my code that I can change to improve it? 

Thanks

See the Pen 96ec6e6dadf7b73d11e38cda125d8920 by akapowl (@akapowl) on CodePen

Link to comment
Share on other sites

Hello @Pauline Brothier , the problem inside the lottiefile  you can check this link http://airbnb.io/lottie/#/supported-features
also I see that you are using Base64 image in your json file , Bas64 encoded images are good practice for a small size (KB) images. 

https://www.davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to/.

I suggest  to use other way for this animation because it's 3D animation, please check this pen :

See the Pen 2152a28cffe2c2c0cca8a3e47f7b21c6 by osublake (@osublake) on CodePen



Have a nice day

Link to comment
Share on other sites

Thanks for your answer. 

The thing is that I want to add interactivity at the end of my animation, for people to be able to click on elements that display informations, and I can't do that with canvas rendering. 

So I will keep looking for a solution. 

About the image encoding, I'm not sure to know which one to choose. 

Thanks

Link to comment
Share on other sites

14 hours ago, Pauline Brothier said:

The thing is that I want to add interactivity at the end of my animation, for people to be able to click on elements that display informations, and I can't do that with canvas rendering. 

 

Sure you can. Most canvas libraries provide that out of the box, or you can do it with HTML5 Canvas API using isPointInPath.

 

See the Pen XWVMQem by GreenSock (@GreenSock) on CodePen

 

See the Pen LdEMaP by osublake (@osublake) on CodePen

 

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