Mamboleoo Posted January 4, 2022 Share Posted January 4, 2022 Hey there, I'm working on a ScrollTrigger animation today and I'm having a really weird issue. See in the attached CodePen how the .fromTo() is applying the end fill colour straight ahead, which make the animation not visible. I have tried with different colours and it didn't help. Now here comes the funny part: If you change the viewBox values, the animation works 🤯 See here, I updated the y value of the viewBox and you can see a result: See the Pen c19d1c77a30d27fee0dec5591ceb6d1e?editors=1010 by Mamboleoo (@Mamboleoo) on CodePen I've tried a couple of parameters but I can't seem to find a reason why the first demo doesn't work... Maybe you'll have a better idea 💚 See the Pen b704ac9728f2c4700f0694b04150bed4?editors=1010 by Mamboleoo (@Mamboleoo) on CodePen 1 Link to comment Share on other sites More sharing options...
Cassie Posted January 4, 2022 Share Posted January 4, 2022 Heya! I don't think I'm understanding. The animation's working in both of them, the only difference is the height difference between the top of the SVG viewBox and the path that's animating. In the one that's not working your trigger start and end are firing before the path comes into view. 1 Link to comment Share on other sites More sharing options...
Cassie Posted January 4, 2022 Share Posted January 4, 2022 If you changed your end markers the animation would scrub through all the distance of the SVG - until you've scrolled past the path e.g. - start: 'top 50%', end: 'bottom top', Link to comment Share on other sites More sharing options...
Mamboleoo Posted January 4, 2022 Author Share Posted January 4, 2022 Oh this is very strange that both are working for you! Here is a screen recording on a MacBook M1 Pro using Microsoft Edge. As you can see, I don't have any animation on the colour 🤔 And I just tried on Safari and I'm having the same issue with the first demo (the one with "0 0 2000 2000" for the viewBox). Screen Recording 2022-01-04 at 17.34.01.mov Link to comment Share on other sites More sharing options...
Cassie Posted January 4, 2022 Share Posted January 4, 2022 The SVG's just massive Louis! 🙃 The animation's happening off screen. Make your pen public so I can fork it pls! Link to comment Share on other sites More sharing options...
PointC Posted January 4, 2022 Share Posted January 4, 2022 Here you go - works fine with the changes @Cassie recommended. See the Pen ExwLJVW by PointC (@PointC) on CodePen 2 Link to comment Share on other sites More sharing options...
Cassie Posted January 4, 2022 Share Posted January 4, 2022 I think you were assuming the coloured element was the trigger? But if you look where the markers are the animation was completing before you hit the element that was animating ✨ Link to comment Share on other sites More sharing options...
Mamboleoo Posted January 4, 2022 Author Share Posted January 4, 2022 Oh wow... If there was a scale for stupidity I think we can an extra level on it thanks to me 🤦♀️ Anyway, thanks for helping and I'm going to bed right now 🌈 2 Link to comment Share on other sites More sharing options...
Cassie Posted January 4, 2022 Share Posted January 4, 2022 I don't think any of our brains are back to full speed after xmas break. 😂 Have a good sleep! 1 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