Jump to content
Search Community

problem is syncing the pin and the animation

jadekins test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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 = [

// 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

Link to comment
Share on other sites

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:




You can post ScrollMagic questions here too:



Happy tweening.


  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...