Jump to content
Search Community

ScrollTrigger animation on elements with the same class

MarkD617 test
Moderator Tag

Recommended Posts

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>

 

Link to comment
Share on other sites

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.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...