Welch08 Posted April 27, 2023 Share Posted April 27, 2023 Hi everyone! I'm trying to implement SVG drawing on scroll based on See the Pen rNOBLBV by GreenSock (@GreenSock) on CodePen . Currently, I have achieved some results (attached codepen), and I have a couple of questions: The timing of the circles is hardcoded (manually set by the selection method). How can I calculate them correctly? Is it possible to do this automatically? Can I somehow calculate when the line intersects the circle trajectory and launch the animation at that moment? Is it possible to slow down the filling and the scroll itself? If the SVG fit on one screen, I think I could use pin, but since it doesn't, is it only possible to achieve this using a custom scroll? I would appreciate any help or advice. Thank you in advance! See the Pen poxPabO by welch08 (@welch08) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted April 27, 2023 Share Posted April 27, 2023 Hi there! Quote The timing of the circles is hardcoded (manually set by the selection method). How can I calculate them correctly? Is it possible to do this automatically? Can I somehow calculate when the line intersects the circle trajectory and launch the animation at that moment? What's wrong with the route you're taking? It works! Calculating would be more considerably more complicated and mean more code. I'd just keep it simple if I were you. Quote Is it possible to slow down the filling and the scroll itself? If the SVG fit on one screen, I think I could use pin, but since it doesn't, is it only possible to achieve this using a custom scroll? The only thing I can think of is using pin and a transform? See the Pen rNqwWLo?editors=0010 by GreenSock (@GreenSock) on CodePen You may need to have a play around with pinSpacing and positioning to get it to work with your content though. 1 Link to comment Share on other sites More sharing options...
Welch08 Posted April 27, 2023 Author Share Posted April 27, 2023 35 minutes ago, Cassie said: What's wrong with the route you're taking? It works! Calculating would be more considerably more complicated and mean more code. I'd just keep it simple if I were you. Got it! Well, in general, you are right, in fact, this is a unique case, so better just manually set timings, rather than calculate them somehow. 36 minutes ago, Cassie said: The only thing I can think of is using pin and a transform? wow, a great way to use pin and transform, thanks, I'll use! Thanks! 1 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