How to pin and overlap multiple elements with ScrollMagic?

Question

I have 9 slides with 3 elements inside, animated with Greensock and Scrollmagic. Currently, the page is very long and if I use setPin() all elements are going crazy.

Here is the example:

https://codepen.io/htmltuts/pen/prVVwK

What I want is that whenever I scroll the page, I want the page position to be the same, only the animations should continue working. After the 3 elements are animated, the should disappear and the other 3 comes in the same position and starting the same animation.

Is it possible to pin every container and leaving the scroll behavior in the page?

Answer 1

If I understand you right you mean to make your pen items fixed.

You could break aport the animated elements & the scroll triggering elements

So create a scroll / trigger elements for triggering the animation.(called block# in my example, you could make this invisible with css)

Then create a fixed element to animate on

My simplefied example below https://codepen.io/ray1618/pen/XaqPQv

// init controller
var controller = new ScrollMagic.Controller();

var tween1 = new TimelineMax();
tween1.to('.fixedblock1', 1, {rotation: 180, ease:Power0.easeNone});

var tween2 = new TimelineMax();
tween2.to('.fixedblock2', 1, {rotation: 180, ease:Power0.easeNone});

var tween3 = new TimelineMax();
tween3.to('.fixedblock3', 1, {rotation: 180, ease:Power0.easeNone});

var triggerHookNum = 0.5;
var durationNum = "40%";

// build scene
var scene = new ScrollMagic.Scene({triggerElement: ".block1", offset: 50, triggerHook: triggerHookNum, duration: durationNum})  .setTween(tween1).addIndicators().addTo(controller);
var scene2 = new ScrollMagic.Scene({triggerElement: ".block2", triggerHook: triggerHookNum, duration: durationNum}).setTween(tween2).addIndicators().addTo(controller);
var scene3 = new ScrollMagic.Scene({triggerElement: ".block3", triggerHook: triggerHookNum, duration: durationNum}).setTween(tween3).addIndicators().addTo(controller);