kodralex Posted December 15, 2021 Share Posted December 15, 2021 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 See the Pen vYexmJN by alexkodr (@alexkodr) on CodePen Link to comment Share on other sites More sharing options...
PointC Posted December 15, 2021 Share Posted December 15, 2021 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. 3 Link to comment Share on other sites More sharing options...
kodralex Posted December 15, 2021 Author Share Posted December 15, 2021 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 More sharing options...
kodralex Posted December 15, 2021 Author Share Posted December 15, 2021 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 More sharing options...
PointC Posted December 15, 2021 Share Posted December 15, 2021 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. 1 Link to comment Share on other sites More sharing options...
kodralex Posted December 15, 2021 Author Share Posted December 15, 2021 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 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