Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
MarkD617

ScrollTrigger animation on elements with the same class

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
Link to comment
Share on other sites

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!

  • Like 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.
×