SnapSVG-Animator icon indicating copy to clipboard operation
SnapSVG-Animator copied to clipboard

Trigger Animation On Scroll Bar location

Open NigelJLinton opened this issue 7 years ago • 4 comments

Hello,

This plugin is great. I've managed to create an animation which gets to Frame 2 and stops, waits for a MouseOver event and then starts again.

However, I'd like to trigger the animation to start again based on where the user scrolls making the animation visible - is this possible at all? If so could you advise on how we might achieve this?

Thanks,

Nigel

NigelJLinton avatar May 03 '17 11:05 NigelJLinton

Sure, that's no problem. We're already doing it.

I assume you are using a scroll manager like scrollr or ScrollMagic. Use their callbacks as the user scrolls and then tell the SnagSVG animation to "gotoAndStop" at a corresponding frame. Or use "percentages" to calculate which frame to go to.

acgmultimedia avatar May 04 '17 15:05 acgmultimedia

Thanks for the response.

Do you have a sample of the code, quite new to the SnapSVG plugin and not sure where to place etc.

NigelJLinton avatar May 10 '17 09:05 NigelJLinton

Hello, I'm also interested in a sample code to trigger the animations based on scroll position!

anybodesign avatar May 18 '17 14:05 anybodesign

controlling mc timeline with Javascropt

frameNumber = Math.floor( totalFrames * ( currentScroll / scrollLength) )
comp = new SVGAnim( json,  width, height, fps );
comp.mc.gotoAndPlay( frameNumber )

gordianknotC avatar May 16 '18 10:05 gordianknotC