Trouble with adding multiple pins and animating background position in Scrollmagic? - gsap

Question

I have added a TimeLineMax to a scene that I am working on. The functionality is working great but I am having trouble with a few details.
I would like my scene to pin like this site http://www.google.com/inbox/#bundles . By this I want multiple pins within one scene so that a user can't scroll through my animations without viewing them.
Here is a demo site of my work so far : https://so-staging.herokuapp.com/users/sign_in#publisher-demo-container
You can see my progress if you scroll down. Three steps will pop up and then animate away. I also have adjusted the background position of #publisher-demo-steps based on scroll.
However this isn't the desired goal. I would like this:
1. Pin #publisher-demo
2. Fire step 1 animated background-position on scroll.
3. Fire step 2
4. Fire step 3
I would like each step to be pinned so that a user can't go to the next step until the animation is complete.
I know this is confusing and I have been staring at it way too long. Thanks for the help. Here is my scrollmagic and GSAP code.
var controller = new ScrollMagic();
var tween = new TimelineMax()
.add(TweenMax.to("#publisher-demo-steps", 0.5, {backgroundPosition : "50% 23%"}))
.add(TweenMax.to(".blue-circle", 1, {display: "block"}))
.add(TweenMax.to(".blue-circle", 1, {className: "+=animated zoomOut", display: "none", delay:3}))
.add(TweenMax.to("#publisher-demo-steps", 0.5, {backgroundPosition : "22% 52%"}))
.add(TweenMax.to(".red-circle", 1, {display: "block"}))
.add(TweenMax.to(".red-circle", 1, {className: "+=animated zoomOut", display: "none", delay:3}))
.add(TweenMax.to("#publisher-demo-steps", 0.5, {backgroundPosition : "76% 50%"}))
.add(TweenMax.to(".green-circle", 1, {display: "block"}))
.add(TweenMax.to(".green-circle", 1, {className: "+=animated zoomOut", display: "none", delay:3}));
var scene = new ScrollScene({triggerElement: "#publisher-demo", duration: 4000, triggerHook: -100})
.setPin("#publisher-demo")
.setTween(tween)
.addTo(controller);

Answer 1

If I understand you correctly you would like to trigger the animations to play unbound from scroll progress.
The way you do this is by not linking the scene that does the pin.
As soon as a scene has a duration it will link animation progress to scroll progress.
Then you just add a scene for each animation trigger point.
i.e. like this:
new ScrollScene({triggerElement: "#trigger-element", duration: 4000, triggerHook: 0})
.setPin("#publisher-demo")
.addTo(controller);
new ScrollScene({triggerElement: "#trigger-element", triggerHook: 0})
.setTween(new TimelineMax()
.to("#publisher-demo-steps", 0.5, {backgroundPosition : "50% 23%"})
.to(".blue-circle", 1, {display: "block"})
)
.addTo(controller);
new ScrollScene({triggerElement: "#trigger-element", triggerHook: 0, offset: 300)
.setTween(TweenMax.to(".blue-circle", 1, {className: "+=animated zoomOut", display: "none", delay:3}))
.addTo(controller);
General notes:
As you see I used a trigger element that is different from the pinned element. It should be positioned absolute and located at the same position as the pinned element. the reason I do this is, because the pinned element moves and would supply a wrong start position for the other scenes.
A triggerHook of -100 doesn't make any sense. The value can by definition only be between 0 and 1.
instead of TimelineMax().add(TweenMax.to()) you can use the shorthand TimelineMax().to() (see http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/to/)
Note, that ScrollMagic 2 has been released for a while now. The syntax is very similar so you should consider upgrading.