Jump to content
Search Community

DrawSVG + ScrollMagic issue

jonneylon_34248 test
Moderator Tag

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 there,


I have attempting to get the scrollmagic and drawSVG to work in succession together but having little luck. I have followed each step in setting up the scrollmagic scene and applied the drawSVG tween to path elements with the appropriate class that I want animated, but seem to be having no luck. 


Any help getting this resolved so I can trigger the paths to draw downwards as the user scrolls would be greatly appreciated!




See the Pen RpQGJL by jonneylon (@jonneylon) on CodePen

Link to comment
Share on other sites

HI jonneylon_34248 :)


Welcome to the GreenSock forum.


The problem is your triggerElement is way past the start point on page load so ScrollMagic advances the tween to that point. If you had elements ahead of the circuits, this wouldn't be a problem, but since it's the only element on the page, you have to make some adjustments. If you add a triggerHook of 0 and shorten the duration to around 500-600, I think you'll see something close to what you wanted.

var scene = new ScrollMagic.Scene({
  triggerElement: "#circuit_svg",
  triggerHook: 0,
  duration :500 

Does that help?


BTW - you're using a 2 year old version of GSAP (1.17). The latest is 1.19.1. If you click your JS gear icon and then use the Quick Add pull-down, you'll find the latest versions of many scripts including GSAP and jQuery.


Happy tweening.


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