Jump to content

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

Using DrawSVG with a Browser Scrollbar Animation

Recommended Posts



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, 



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




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.