SnapSVG-Animator
SnapSVG-Animator copied to clipboard
Trigger Animation On Scroll Bar location
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
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.
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.
Hello, I'm also interested in a sample code to trigger the animations based on scroll position!
controlling mc timeline with Javascropt
frameNumber = Math.floor( totalFrames * ( currentScroll / scrollLength) )
comp = new SVGAnim( json, width, height, fps );
comp.mc.gotoAndPlay( frameNumber )