Elemente können nicht überlappt werden, wenn die GSAP-Stagger-Methode verwendet wird

Question

Also versuche ich einige Buchstaben mit TweenMax.staggerTo zu staffeln. Hier

ist die JS:

TweenMax.staggerTo(letter, 2, {bottom:0, opacity: 1, delay: 2}, 1); 

Die HTML:

<div class="middle"> 
    <p class="letter">p</p> 
    <p class="letter">p</p> 
    <p class="letter">p</p> 
    <p class="letter">p</p> 
</div> 

Und die CSS:

.letter { 
    display: inline; 
    margin-right: 100px; 
    opacity: 0; 
    position: absolute; 
} 

.middle { 
    text-align: center; 
    padding-top: 100px; 
    height: 100vh; 
    margin: auto; 
} 

Einer der offiziellen Tutorials, die ich sah, erklärt, dass die Position auf der Das zu animierende Element muss eine absolute oder feste Positionseigenschaft haben.

Ich bin jedoch verwirrt, wie ich diese Objekte animieren kann, ohne dass sie sich gegenseitig überlappen. Dies ist ein Beispiel für was ich gehe: GSAP Staggered Animated Elements

Vielen Dank!

Answer 1

Hier ist ein codepen von dem, was ich rede

<div class="middle"> 
<p class="letter">h</p> 
<p class="letter">e</p> 
<p class="letter">l</p> 
<p class="letter">p</p> 
</div> 

.letter { 
    display: inline; 
    margin-right: 100px; 
    opacity: 0; 
    position: absolute; 
    font-size: 40px; 
} 

.middle { 
text-align: center; 
height: 100vh; 
margin: auto; 
position: relative; 
} 

var letter = document.getElementsByClassName("letter"); 
TweenMax.staggerTo(letter, 2, {bottom:0, opacity: 1}, 1); 

Answer 2

Ich habe das gleiche Problem und, beachten Sie bitte, dass ich auch ein Anfänger bin, die staggerTo Methode für dieses Beispiel nicht geeignet ist.

Blick Lassen Sie sich auf der offiziellen Definition der staggerTo Methode GreenSock:

Tweens an array of targets to a common set of destination values, but 
staggers their start times by a specified amount of time, creating an  
evenly-spaced sequence with a surprisingly small amount of code. 

Also, wenn ich verstehe, ist die wichtigste Sache im Auge zu behalten ist, dass es eine Reihe von Zielen zu einem gemeinsamen Tweens Set von Zielwerten. Deshalb überlappen sich Ihre Buchstaben, die die gleichen Zielwerte haben, und so wird die staggerTo-Methode grundsätzlich verwendet.

Was ich versucht habe, um dieses Problem zu lösen, ist, dass, da alle meine Elemente in einem Array sind, ich die forEach() Methode in Javascript verwendet und den Index für jede Schleife inkrementiert.

Hier ist die codepen geändert, setzen Sie sich bitte wieder fragen, ob Sie undestand nicht: CodePen Solution

Im Grunde, was ich gerade tat ist wie eine einfache Timeline zu tun und ein zu Verfahren für jeden Buchstaben hinzufügen.

Hoffe es hilft!

Happy Tweening