Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
DNaoures

Generate and Animate Arrow

Go to solution Solved by PointC,

Recommended Posts

Hi there!

 

I would start by creating a path and an arrow shape in a graphics editor. Boxy is a great for SVG.

https://boxy-svg.com

Then take that SVG code, and animate the arrows along a motion path with GSAP's motionPath plugin
 



Hope this helps! Good luck.

  • Like 1
Link to comment
Share on other sites

  • Solution

A few examples of cloning your target and putting it on a MotionPath.

 

See the Pen gOoKdOR by PointC (@PointC) on CodePen

 

See the Pen ExVzqdm by PointC (@PointC) on CodePen

 

See the Pen pojmBKJ by PointC (@PointC) on CodePen

 

And for simple dashes, you can animate the strokeDashoffset

See the Pen YzYvLqN by PointC (@PointC) on CodePen

 

Good luck and happy tweening.

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

PS I should also mention that our own @Carl is doing a whole summer of SVG training thing. Check out his tweets and website. Here's one showing the basics of Boxy SVG.

 

  • Like 4
Link to comment
Share on other sites

 @PointC, @Cassie thanks a lot  your answers ! 

 

It's perfect !! 

 

Have a good day !

David

 

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.
×