Jump to content
GreenSock

Mamboleoo

ScrollTrigger - Issue with SVG fill & .fromTo()

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

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

 

 

 

Link to comment
Share on other sites

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

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

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 🌈

  • Haha 2
Link to comment
Share on other sites

I don't think any of our brains are back to full speed after xmas break. 😂 

Have a good sleep!

  • Like 1
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.
×