Jump to content
GreenSock

Surge

leave behind a trail when moving an image around with bezier

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

Really nice quick helpful code demo Carl :)

  • Like 1
Link to comment
Share on other sites

Well, I know this is off-topic... but after playing The Witness for two weeks, Carl's demo made me do a double take haha :P

Link to comment
Share on other sites

Very nice. thanks for sharing the results

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