Jump to content
Search Community

leave behind a trail when moving an image around with bezier

Surge test
Moderator Tag

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi all.

 

What part of gsap would I use to leave behind a trail when moving an image around with bezier?

 

What I am trying to do is animate an arrow. So the arrow head will move down the page and point at parts of the page and then as the user scrolls down I will trigger the next animation. This would continue moving the arrow down the page a bit like a snake. If you can imagine a snakes head moving up down and left to point at headings on the page and its body get left behind as a trail while the head moves on.

I was thinking it would be a bit like this code pen but a green trail would be left behind:

 

An suggestions? Thanks!

See the Pen LuIJj by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

  • Solution

Hi surge,

 

Since you are a member, the easiest approach would be to use DrawSVGPlugin to reveal the tail of the snake and MorphSVGPlugin to convert an SVG <path> to bezier data to be passed into a Bezier tween (for the head to follow).

 

Here is a little example: 

 

http://codepen.io/GreenSock/pen/obQbjb?editors=0010

 

Learn more about

MorphSVGPlugin: http://greensock.com/docs/#/HTML5/GSAP/Plugins/MorphSVGPlugin/

DrawSVGPlugin: http://greensock.com/docs/#/HTML5/GSAP/Plugins/DrawSVGPlugin/

  • Like 6
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...