Jump to content
Search Community

ScrollTrigger - Issue with SVG fill & .fromTo()

Mamboleoo test
Moderator Tag

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

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

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