ScrollTrigger animation on elements with the same class

[MarkD617 5 Likes (Newbie)]

I have multiple blocks on a page with the same class name "animate-up". What I would like to achieve is as the user scrolls down the page the "animate-up" blocks slightly move up and down pending on scroll direction. I have it working now when it is only ONE element with the class name. The problem is when I add the "animate-up" class to the other blocks the whole page gets kinda janky / jumpy. when the "animate-up" is only on ONE element it works perfectly. Do I need to create a loop or possibly a timeline to achieve this outcome?

 

I should mention this is in a Nuxt / Vue environment:

 

mounted() {

gsap.to('.animate-up', {

yPercent: -30,

 

ease: Power2.easeInOut,

scrollTrigger: {

trigger: '.row--blocks',

scrub: 0.5,

},

})

},

 

HTML:

 

<div class="l-project animate-up">

<img

src="../assets/img/mp-collage.jpg"

class="img-responsive"

/>

</div>

 

<div class="l-project animate-up">

<img

src="../assets/img/mp-collage.jpg"

class="img-responsive"

/>

</div>

 

<div class="l-project animate-up">

<img

src="../assets/img/mp-collage.jpg"

class="img-responsive"

/>

</div>

 

[ZachSaucier 7,151 Likes (Superhero)]

Hey Mark. You're making one of the most common ScrollTrigger mistakes: using generic targets for your tweens and triggers instead of ones specific to the elements you want to affect. In other words every one of your elements are going to be animated when the first one is reached (multiple times). That's no good. Instead, loop through your elements and setup animations and ScrollTriggers for each as the linked article suggests. Most likely you want to use refs instead of query selector strings as well.

 

Side note: We recommend using the condensed GSAP 3 format for easing: ease: "power2.inOut". That will also save you from having to import the specific eases.

[MarkD617 5 Likes (Newbie)]

Hey Zach! Thank you for clearing that up for me and also the link to the common mistakes! I'll surely be reading through those today :)......Love GSAP and your team!