cerealbeast Posted December 21, 2022 Share Posted December 21, 2022 I want to create an animation on my site where a section is pinned and my logo (lightning bolt) is drawn as you scroll. I have been reading/looking at codepens (like the one attached) for a few hours and I'm just a bit confused as to how to get started. How do you create a custom path? It seems that there must be an easier way than having to hand code all of the points as I wouldn't even now where to begin! Is there a way you can upload an image and trace the points over the top or something? See the Pen WNONMXP by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted December 21, 2022 Share Posted December 21, 2022 Hi, I'd start with something like this and use the Draw SVG Plugin for creating the drawing animation (as you can see there are quite a few elements out there): https://www.freepik.com/free-vector/abstract-colorful-lightning-collection-simple-background_5779705.htm#query=lightning&position=4&from_view=search&track=sph Of course that would imply having the vector in a single path or creating a timeline to animate all the individual paths in the correct order. @PointC has a bunch of really good resources to understand how to get your SVG ready for GSAP: https://www.motiontricks.com/cut-your-path-start-points-in-adobe-illustrator/ https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/ https://www.motiontricks.com/better-svg-exports-make-animations-easier/ Finally this one for creating custom SVG with JS: https://www.motiontricks.com/creating-dynamic-svg-elements-with-javascript/ Unfortunately SVG is not something I excel at so I can't really help you beyond those links. Hopefully another user with better understanding and more experience with this can chime in. Finally here is an example drawing multiple lines at the same time: See the Pen jEEoyw by GreenSock (@GreenSock) on CodePen Happy Tweening! Link to comment Share on other sites More sharing options...
Cassie Posted December 21, 2022 Share Posted December 21, 2022 You need a graphics editor mate! Give this one a bash - pop back if you have questions Kapture 2022-12-21 at 16.03.02.mp4 https://boxy-svg.com/ 1 Link to comment Share on other sites More sharing options...
cerealbeast Posted December 21, 2022 Author Share Posted December 21, 2022 I have illustrator, I just have no idea what I have to do to get the code I need. Do I trace my logo with the pen tool in Illustrator? Then whats next? Link to comment Share on other sites More sharing options...
Rodrigo Posted December 21, 2022 Share Posted December 21, 2022 I don't use Illustrator so I couldn't tell you. I'd start by reading the articles by Craig in Motion Tricks, those are based on using Illustrator. Link to comment Share on other sites More sharing options...
cerealbeast Posted December 21, 2022 Author Share Posted December 21, 2022 I've read the first three articles you linked, unfortunately they don't explain the absolute basics of creating a shape and retrieving the code required. Link to comment Share on other sites More sharing options...
cerealbeast Posted December 21, 2022 Author Share Posted December 21, 2022 This thread states that you can use the pen tool in illustrator, so can I just draw the shape I want with the pen and then get the code needed to animate it with GSAP? Apologies, this is the first time I've looked at clip paths so have absolutely no idea where to start! Link to comment Share on other sites More sharing options...
cerealbeast Posted December 21, 2022 Author Share Posted December 21, 2022 Ok I've managed to get it working (just about). See the Pen WNKbagv by gwjr (@gwjr) on CodePen Are you able to help me get it to the point where it animates on a pinned section like this? 1 Link to comment Share on other sites More sharing options...
Solution Cassie Posted December 21, 2022 Solution Share Posted December 21, 2022 Sure thing, here you go! See the Pen bGjNmyd by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
cerealbeast Posted December 21, 2022 Author Share Posted December 21, 2022 Thanks Cassie, although I can't see anything being animated? Link to comment Share on other sites More sharing options...
cerealbeast Posted December 22, 2022 Author Share Posted December 22, 2022 Ahh its working now! Thank you Cassie. One last thing, how do I move the animation to the centre of the screen and make it responsive? Link to comment Share on other sites More sharing options...
mvaneijgen Posted December 22, 2022 Share Posted December 22, 2022 10 minutes ago, cerealbeast said: how do I move the animation to the centre of the screen and make it responsive? As you can see in @Cassie's pen with the red border your SVG is a really weird shape with the element position somewhere randomly at the lower left edge. The element is centered and responsive, so if you fix your artboard in illustrator to be just the size of your shape it will then be also visually centered in the pen. Link to comment Share on other sites More sharing options...
cerealbeast Posted December 22, 2022 Author Share Posted December 22, 2022 Thanks, got it working properly now. I amended the html on @Cassie's demo (the viewbox values I used were wrong). For some reason when I forked the codepen to my own profile it doesn't animate though. See the Pen OJwVVre by gwjr (@gwjr) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted December 22, 2022 Share Posted December 22, 2022 There was an extra quote character in your HTML viewbox attribute and you are animating the SVG where you should be animating the path of the SVG. You were also loading a really old version of GSAP I have updated them. See the Pen JjBdYPv by mvaneijgen (@mvaneijgen) on CodePen 3 Link to comment Share on other sites More sharing options...
cerealbeast Posted December 22, 2022 Author Share Posted December 22, 2022 Amazing thanks for the help @mvaneijgen 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