jadekins

I am animating a ScrollMagic scene by cycling through an array of images. I have an additional ScrollMagic scene to pin the animation. The problem is syncing the pin and the animation. The animation is glitchy for most of the duration of the pin then going really fast at the end. I want the user to be able to scroll through the animation - so each individual image is called by a single scroll action for the duration of the pin. How can I achieve this effect? var images = [ "slide1.png","slide2.png","slide3.png","slide4.png","slide5.png", "slide6.png","slide7.png","slide8.png","slide9.png" ]; // object cycles through the images array var obj = { currentImage: 0 }; // create animation tween var tween = TweenMax.to(obj, .5, { currentImage: images.length - 1, roundProps: "currentImage", immediateRender: true, backgroundPosition: "0 100%", ease: SteppedEase.config(9), onUpdate: function() { jQuery('#myimg').attr('src', images[obj.currentImage]) } }); // init animation controller var controller = new ScrollMagic.Controller({ globalSceneOptions: { triggerOffset: -200, offset: -200, triggerHook: 'onLeave' } }); // build animation scene var animation = new ScrollMagic.Scene({ triggerElement: '#myimg', duration: 1000, triggerOffset: -200, offset: -200 })