Jump to content
GreenSock

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

ScrollTrigger not acting individually

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

Hi Jncocontrol!

 

It's hard to tell what's going on from a code snippet. Do you think you can make a minimal demo?

 

Also check out the common mistakes article. A scroll trigger should not be nested inside a timeline.

 

  • Like 1
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

5 hours ago, Jncocontrol said:

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

Glad to hear it. So you're all set? Hopefully things are clicking well for you now. Once you get the basics down, you're gonna have a lot of fun. 

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