Jump to content
GreenSock

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

Using DrawSVG with a Browser Scrollbar Animation

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

Hello, 

 

What I am trying to do is combine the DrawSVG plugin with

See the Pen mbrqt by adrianparr (@adrianparr) on CodePen

 awesome pen, so that a line can be drawn based on the location of the browser scrollbar. Ultimately I would like to make the dotted line reveal with the rocket ship, so that it appears as though the rocket is leaving the line as a tail behind it. 

What I hoped to do was create 2 timelines so that I could match up the timings of the rocket and the line reveal. What I can't seem to do is get the DrawSVG plugin to respond to the custom code which links up the timeline to the scrollbar.  I was also thinking there might be some simpler way to do this by revealing the line with a mask, but I was not able to find any methods which might work with the browser scrollbar. I'd really appreciate any tips, similar projects, or help you might be able to give.

 

Thanks a ton, 

 

Savana

See the Pen YwxzjN by SavanaPope (@SavanaPope) on CodePen

Link to comment
Share on other sites

It appears that pen was loading a funky version of TweenMax.

 

Please see the revisions here: http://codepen.io/GreenSock/pen/eJEpvb?editors=001

 

To have the rocket perfectly follow an SVG path please read the section "Animate along an SVG Path" here: http://greensock.com/morphsvg-update and watch the video.

 

I forked a demo from the article to show you how the motion path can draw perfectly in synch with the balloon

 

http://codepen.io/GreenSock/pen/yeoYbx/

 

You should be able to use the exact same technique with your rocket. 

  • Like 3
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.
×