ScrollTrigger + DrawSVG

[RBari]

Hey GSAP! I created a layered pinning from the bottom.  Codepen Link below 👇.

 

Here's the problem: When I scroll, I want to scrub through the drawing of America using drawSVG, but that's not working.

 

How I tried fixing it: Using scrollTrigger, I tied the scrubbing of the svg path to the scrollbar: 

gsap.to('.america',{
    scrollTrigger: {
        trigger: '.obama',
        start: 'top center',
        end: 'top 400px',
        scrub: 1
    },
    drawSVG:0, 
    repeat:10, 
    yoyo:true
});

 

I would greatly appreciate it if someone could help out. Thank you!

See the Pen dyvVqvg?editors=1000 by Refath (@Refath) on CodePen

[GreenSock]

Welcome to the forums, @RBari. 

 

You just forgot to load DrawSVGPlugin and you had some very odd values in your animation, like repeat: 10. And the start position was off. I assume this is kinda what you were looking for?: 

See the Pen XWMexbP?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Just keep in mind that DrawSVGPlugin is a membership benefit of Club GreenSock, so you'll need to sign up to get the full version that works outside of CodePen. 

 

Happy tweening!

[RBari]

@GreenSock This is really, truly, unbelievable support. Thank you so much for the help. 

[GreenSock]

Happy to help, @RBari We really try to bend over backwards to help our users around here. 

 

Enjoy the tools!