Jump to content
Search Community

Custom clip path

cerealbeast test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

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

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

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

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.
×
×
  • Create New...