Comment épingler et chevaucher plusieurs éléments avec ScrollMagic?

Question

J'ai 9 diapositives avec 3 éléments à l'intérieur, animés avec Greensock et Scrollmagic. Actuellement, la page est très longue et si j'utilise setPin() tous les éléments deviennent fous.

Voici l'exemple:

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

Ce que je veux est que chaque fois que je fais défiler la page, je veux que la position de la page pour être les mêmes, seules les animations devraient continuer à travailler. Après que les 3 éléments sont animés, le devrait disparaître et les 3 autres viennent dans la même position et commencent la même animation.

Est-il possible d'épingler chaque conteneur et de laisser le comportement de défilement dans la page?

Answer 1

Si je vous comprends bien, vous voulez faire réparer vos stylos.

Vous pouvez briser aport les éléments animés & le défilement déclenchement éléments

donc créer un défilement/éléments de déclenchement pour le déclenchement de l'animation. (Appelé bloC# dans mon exemple, vous pouvez faire cette invisible avec css)

Ensuite, créez un élément fixe pour animer le

Mon exemple simplefied ci-dessous 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);