Share Posted June 15, 2022 Hello everybody An idea to generate (from a basic path) and animate this kind of arrows (with chevrons) ? https://dribbble.com/shots/3996538-Flow-Diagram-for-Geetest-Identity-Verification/attachments/10139114?mode=media Thanks a lot for your help !! Link to comment Share on other sites More sharing options...
Share Posted June 15, 2022 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. 1 Link to comment Share on other sites More sharing options...
Solution Solution Share Posted June 15, 2022 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. 3 1 Link to comment Share on other sites More sharing options...
Share Posted June 15, 2022 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. 4 Link to comment Share on other sites More sharing options...
Author Share Posted June 16, 2022 @PointC, @Cassie thanks a lot your answers ! It's perfect !! Have a good day ! David 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