Jump to content
Search Community

Two instances of ScrollTrigger

_Moon test
Moderator Tag

Recommended Posts

Hello everyone!

 

I've been using the plugin for a while now but ran into an issue i can't seem be able to fix.

 

In this page https://gsap.sitedev.pt (didin't create a codepen because it would be hard to replicate), i ran into an issue with the scrolltrigger plugin.

 

My issue is with the first two sections. I'm using this example:

 

I need to have two sections with div's pinning to eachother but the two have to be seperated so i created two instances of scrolltrigger:

 

    ScrollTrigger.create({
        trigger: ".container-animation-first",
        start: "top top",
        end: () => (container.scrollWidth - window.innerWidth),
        pin: true,
        anticipatePin: 1,
        scrub: scrubValue,
        invalidateOnRefresh: true,
    });

   

 

    ScrollTrigger.create({
        trigger: ".container-animation-secondary",
        start: "top top",
        end: () => (container_secondary.scrollWidth - window.innerWidth),
        pin: true,
        anticipatePin: 1,
        scrub: scrubValue,
        invalidateOnRefresh: true,
    });

 

As you can see in the following file: https://gsap.sitedev.pt/wp-content/themes/wp-starter-theme-master/assets/js/animation.js

 

The issue here is that this only works in the first section, creating some kind of issue with the second section where the code applies because the first section for example this property:

 

padding: 0px 0px 9640px;

 

while the second has:

 

padding: 0px 0px 0.001px;

 

not creating because of this the conditions for the scroll to happen, nor does it pin like the first one does.

 

I've tried several solutions but can't be able to seem to find a fix so the two sections pin and work one after the other. I've tried the fix in "Using one ScrollTrigger or animation for multiple "sections" " but it does not seem to fix it as the exact same thing happens.

 

I can't seem to be able to figure out what the issue is, and if i could get any help i'd appreciate it!

 

Thanks in advance for any help!

 

 

Link to comment
Share on other sites

My guess is that this is the problem:

// this returns a number which is interpreted as an exact scroll position
end: () => (container_secondary.scrollWidth - window.innerWidth)

I assume you meant to use a relative value more like this?:

end: () => "+=" + (container_secondary.scrollWidth - window.innerWidth)

Unfortunately we don't have the resources to troubleshoot live sites or weed through hundreds of lines of JS/CSS/HTML to provide free consulting services, but we're happy to answer any GSAP-specific questions. If you still need some help, please provide a minimal demo that only isolates the specific issue you're dealing with in the most simplistic way (a few <div> elements, for example - NOT your whole site). 

 

Happy tweening/scrolling!

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