Problème de positionnement de scène avec ScrollMagic

Question

J'ai créé une animation en utilisant GreenSock et ScrollMagic qui fonctionne très bien, mais je n'arrive pas à comprendre comment ajuster la position initiale de la scène/des graphiques (avant que l'utilisateur ne déclenche l'animation). Actuellement, j'appelle la méthode .setPin sur un élément conteneur avec la classe de 'stage'. Cet élément de scène est à l'intérieur d'un conteneur parent plus grand (# comment-ça-marche) qui est le triggerElement pour l'animation:

var scene = new ScrollMagic.Scene({triggerElement: "#how-it-works", duration: 4000}) .setPin(".stage") .addTo(controller) .setTween(scrollAnimation);

La question que je vais avoir est que l'élément de scène est d'abord « coincé "en haut du conteneur parent, et je voudrais juste qu'il soit centré verticalement dans le conteneur parent avant que l'animation ne soit déclenchée. J'ai essayé d'ajuster la propriété CSS 'top' sur l'élément .stage, mais cela m'a obligé à utiliser! Important et cela produit des résultats étranges. Y a-t-il des paramètres/arguments qui contrôlent spécifiquement le positionnement d'un élément épinglé dans ScrollMagic?

Voici un codepen avec mon animation - http://codepen.io/BillKroger/pen/bwNXZV (assurez-vous de faire défiler vers le bas)

Toute aide avec ceci est grandement appréciée!

Answer 1

Ok, j'ai été capable de le comprendre - j'ai fini par emballer la scène/graphiques à l'intérieur d'un conteneur supplémentaire, et lui a donné un positionnement relatif avec une propriété supérieure. Ensuite, pour le Javascript, j'ai juste ajouté un décalage à l'instance de la scène, en m'assurant qu'il est égal à la propriété de position supérieure appliquée au nouveau conteneur. Voici tous les changements:

HTML:

<div class="stage-wrapper"> <!-- new container --> 
    <div class="stage"> 
     <div class="svg-image"></div> 
     <div class="svg-image"></div> 
     <div class="svg-image"></div> 
    </div> 
</div> 

CSS:

.stage-wrapper { 
    position: relative; 
    top: 300px; 
} 

Javascript:

var scene = new ScrollMagic.Scene({ 
    triggerElement: "#how-it-works", 
    duration: 4000 
}) 

.setPin(".stage") 
.addTo(controller) 
.setTween(scrollAnimation); 

// add a scene offset amount equal to the top positioning for the new container 
scene.offset(300); 

Mise à jour Codepen: http://codepen.io/BillKroger/pen/bwNXZV

C'est p Robably pas la seule façon de résoudre le problème, mais la solution ci-dessus a fini par fonctionner dans mon cas.