problem is syncing the pin and the animation

[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
})

[PointC]

Hi  jadekins 

 

Welcome to the GreenSock forum.

 

This is really more of a ScrollMagic question and we have to keep our focus on GSAP problems and questions. That being said, if you can put together a demo, we can take a look and probably point you in the right direction. Here's some info about that:

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

You can post ScrollMagic questions here too:

https://github.com/janpaepke/ScrollMagic/issues

 

Happy tweening.

[mikel]

sorry - wrong topic