ScrollTrigger positioning when using TranslateY

[Alexander123]

Hello all.

I am quite new to GSAP and apologize if this is a stupid question.

 

I'm using TranslateY to on content below my hero section to quickly move it up past the hero as it fades out. Because of this, other sections that rely on the trigger at a certain point are off because of the -15% I'm translating a div.

 

The HTML is essentially:

 

<div>
  <section id="hero"></section>
  <div id="below-hero">
  <!-- rest of page content -->
    <div></div>
    <div></div>
  </div>
</div>

My GSAP:

gsap.to('#below-hero', {
            scrollTrigger: {
                trigger:'#hero',
                start:'bottom bottom',
                toggleActions: "restart pause reverse pause",
                scrub:1
            },
            yPercent:-15,
            opacity:1,
            duration:2
        });

 

The way the #below-hero div flows into the hero as it fades out looks good, however, I'm wondering if this is a flawed way of achieving what I wanted? Now every section is off by the percentage in terms of the trigger. How can I fix this the "correct" way?

 

[Rodrigo]

Hi @Alexander123 and welcome to the GreenSock forums!

 

Is really hard for us to troubleshoot issues without a minimal demo, but based on what you describe and given the small HTML snippet you posted everything is inside that particular below hero section, so of course moving that particular element no the Y axis will have the effect you are describing. What you can do is offset the following ScrollTrigger instances by 15% of that section's height in order to correct it, but I'm basically troubleshooting blind here.

 

If you keep having issues let us know and remember to post a minimal demo.

 

Happy Tweening!