NickNo Posted June 18, 2020 Share Posted June 18, 2020 This animation is part of a bigger landscape with lots of other animations going on - everything is looking fine except for this one animation on Windows (10) Firefox (77) - the train should come into the station and then leave again - on windows FF the outward journey jumps to the left of the screen! I thought maybe it was something elsewhere in the svg or my code, but even stripping it down for codepen it is still happening... Is this a specific FF bug? or am I doing something silly? See the Pen pogRydo by nickjacobsnz (@nickjacobsnz) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 18, 2020 Share Posted June 18, 2020 Hey Nick. This is another case of not setting up the SVG properly. The main issue is that you have an existing transform on the element that you're animating so Firefox on Windows apparently handles it differently than other browsers. To fix it, remove the transform. I also noticed some tiny randomly placed elements inside of the train group. That was contributing to how far out of place it was being moved. See the Pen MWKJebp by GreenSock (@GreenSock) on CodePen Happy tweening! 1 Link to comment Share on other sites More sharing options...
NickNo Posted June 18, 2020 Author Share Posted June 18, 2020 Thanks for the quick reply Zach, but you've lost me - where is that existing transform coming from (there's nothing in the html/css) - or do you mean the transformOrigin gsap is doing? Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 18, 2020 Share Posted June 18, 2020 Doh, the transform part is my fault. When removing extraneous things from the SVG I added it because I copied from the dev tools without stopping the JS So that's not an issue. The issue is just coming from those extra couple of paths that I mentioned that do nothing: <path class="st3" d="M1873.1,387.7"></path> <path class="st3" d="M1872.8,387.7"></path> Remove those and the problem goes away. Apparently FF tries to render them. See the Pen wvMgWyM?editors=1000 by GreenSock (@GreenSock) on CodePen 1 1 Link to comment Share on other sites More sharing options...
NickNo Posted June 18, 2020 Author Share Posted June 18, 2020 Beauty, thats cracked it And, "check your bloody SVGs" comment noted Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now