codechirag Posted Wednesday at 11:52 AM Share Posted Wednesday at 11:52 AM Namaste Guys, I am trying to create one animation on scroll with a svg line but can't achieve as expected. here is the screenshot and also the reference site https://thevariable.com/ I have tried so far is in the stack https://stackblitz.com/edit/react-mmp4w3?file=src%2Fstyle.css Link to comment Share on other sites More sharing options...
Carl Posted Wednesday at 12:55 PM Share Posted Wednesday at 12:55 PM Hi, It's not really clear to me which part of the animation you have trouble with: the line morph, highlighting the path, moving the highlight segment etc... Regardless, it's a pretty neat effect. With GSAP's available tools it's all possible. Here is a demo with enough code to get you started: See the Pen WNBVmwB?editors=0010 by snorkltv (@snorkltv) on CodePen The reference site uses a masked path but I'm not sure how much of that site you intend to copy. I copied the exact stroke d attributes from the site's source code for this demo. 3 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