Jump to content
Search Community

ScrollTrigger not acting individually

Jncocontrol test
Moderator Tag

Recommended Posts

What I mean by individually, is when i pass a threshold on the trigger, it'll trigger all the elements rather than doing it for each trigger. If that makes any sense.

 

BTW, i'm using svelte, I don't think it should mean much, but if it does. Furthemore, i have a onMount in my index route.

here is my code if it means anything.
 

Quote

import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

 

export function run (){

    let section = document.querySelectorAll("section");  
    let header = document.querySelector("header");
    let burger = document.querySelector(".burger")
    let revImg = document.querySelectorAll(".reveal-img");
    let revTxt = document.querySelectorAll(".reveal-text");
    let img = document.querySelectorAll("img")
    
    gsap.registerPlugin(ScrollTrigger)
    
    section.forEach(sec => {
        let TL = gsap.timeline({defaults: {duration: 1.35, ease: "power2.inOut"}})

        TL.fromTo(img, {scale: 1.5}, {scale: 1}),
        TL.fromTo(revTxt, {x: '0%'}, {x: '100%'}, "-=1.88")
        // TL.fromTo(revImg, {x: '0%'}, {x: '100%'}),
        TL.fromTo(header, {y: '-100%'}, {y: '0%'}, "-=1.4")
        TL.fromTo(burger, {x: '150%'}, {x: '0%'}, "-=.9")

        TL.to(revImg,{
            scrollTrigger:{
                trigger: sec,
                start: 'top 100px',
                endTrigger: sec,
                end: 'bottom 20%',
                pin: true,
                markers: true
            },
            x: '100%',
            duration: 1.5
        })

        TL.to(section,{
            scrollTrigger:{
                trigger: sec,
                start: 'top 100px',
                endTrigger: sec,
                end: 'bottom 20%',
                pin: true,
                markers: true
            },
            opacity: 0,
            duration: 1.5
        })
    
      
    })    

}

For a video here is one on my Mega Account.

https://mega.nz/file/BFojTIwI#LQ9EjNKaXGa3HTzktox6HoDJAU1IOf_UV5qJn3lOzK0

Link to comment
Share on other sites

It looks to me like you made one of the common mistakes; you animated ALL of the elements each time through your section loop. 

 

// BAD
let section = document.querySelectorAll("section");  
let img = document.querySelectorAll("img");

section.forEach(section => {
  gsap.to(img, { // <-- BAD! ALL images!!
    ...
    scrollTrigger: {
      trigger: section,
      ...
    }
  });
});
  
  
// GOOD
let section = document.querySelectorAll("section");  

section.forEach(section => {
  let img = section.querySelector("img"); // <-- only the img inside this section!
  gsap.to(img, {
    ...
    scrollTrigger: {
      trigger: section,
      ...
    }
  });
});

I hope that helps. Like Blake said, if you still need help, please provide a minimal demo

 

Happy tweening!

  • Like 1
Link to comment
Share on other sites

5 hours ago, GreenSock said:

It looks to me like you made one of the common mistakes; you animated ALL of the elements each time through your section loop. 

 



// BAD
let section = document.querySelectorAll("section");  
let img = document.querySelectorAll("img");

section.forEach(section => {
  gsap.to(img, { // <-- BAD! ALL images!!
    ...
    scrollTrigger: {
      trigger: section,
      ...
    }
  });
});
  
  
// GOOD
let section = document.querySelectorAll("section");  

section.forEach(section => {
  let img = section.querySelector("img"); // <-- only the img inside this section!
  gsap.to(img, {
    ...
    scrollTrigger: {
      trigger: section,
      ...
    }
  });
});

I hope that helps. Like Blake said, if you still need help, please provide a minimal demo

 

Happy tweening!

That did the trick. Much Appreciated. One more question - In my project i have 3 sections, and I'd like to run the scrollTrigger each time I cross the trigger. But I think it has something to do with it being in a function (I have to unfortunately run it this way). And since it only run once, how can I achieve the result I desire?



EDIT: I was able to figure it out. Disregard this.

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...