Jump to content
GreenSock

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

DrawSVG + ScrollMagic issue

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!

 

Cheers,

Jon

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