Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kodralex

Pinned ScrollTrigger SVG fill

Recommended Posts

I have an svg circular shape which I'm trying to change the fill colour for different segments of the shape on scroll. Using pinned ScrollTrigger. The problem I'm facing is I've only done something like this using the DrawSVGPlugin which animates the stroke (see codepen). What I want to do is animate the fill on scroll (clockwise or top to bottom). Any ideas best way to do this? I've attached a rough gif (ignore it's looped) to give you an idea. I want to carry the colours rounds different colour for each arrow.

 

Thanks

example.gif

See the Pen vYexmJN by alexkodr (@alexkodr) on CodePen

Link to comment
Share on other sites

If you're using a filled path like that, you could mask it with a stroke wide enough to reveal it with drawSVG. If it were me though, I'd rework the vectors a bit  because they would work perfectly with drawSVG and no mask. The line would be one piece and maybe two pieces for the arrowhead. 

 

If you go the mask route, I have a tutorial on my site which should be helpful:

https://www.motiontricks.com/svg-dashed-line-animation/

 

Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

Cheers for the reply. Yes I think I'll re-work the svg arrows into two pieces each and use drawSVG.

Link to comment
Share on other sites

Just to update on this. I've re-worked the svg and got working using the drawSVG function. My next question is how do I stagger the animation? At the minute when you scroll down everything animates together, rather than one item after another. My guess this is something to do this the start value on the scroll trigger?

 

Also might be best to view on codepen. For some reason the embedded pen above seems buggy.

 

Thanks

Link to comment
Share on other sites

They're all animating at once because you have a bunch of loose tweens and ScrollTriggers. You'd want to put them on a timeline with one trigger and a stagger. Here's a fork of your demo to show you the technique. I've added the lines as a start. You can add the arrowheads to finish it. 

 

See the Pen 867eed053dbea134480f6cb825b0a693 by PointC (@PointC) on CodePen

 

Happy tweening.

:)

 

  • Like 1
Link to comment
Share on other sites

Thanks Craig. I already figured after going back over the documentation and looking at some similar examples that I needed to timeline the bits together. Thanks for taking time out to look.

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