Jump to content
GreenSock

sarathchand19

Scroll Trigger not working at start

Recommended Posts

Hello there,

 

Please find the video in the link HERE, for visual understanding.

 

I am using GSAP in my portfolio website, which was developed in react. I already used for the GSAP for the mobile, which decreases its size during scroll. But for the next one, It's not working at start, when I click inspect it is working fine, and after closing inspect it is working fine. But during the first instance it's not working.


This is the scroll trigger code for left and right mockups.

useEffect( () => {
  gsap.registerPlugin(ScrollTrigger);
  gsap.to( ".us-b-a-left",{ 
        scrollTrigger:{
          trigger:".us-b-a-left",
          scrub:true,
          end:"+=128",
          start:"top 70%",
        }, transform:"translate(0,0)"})
  gsap.to( ".us-b-a-right",{ 
        scrollTrigger:{
          trigger:".us-b-a-left",
          scrub:true,
          end:"+=128",
          start:"top 70%",
      }, transform:"translate(0,0)"})
}, [])

The HTML Code for the same is

<div className="us-b-a us-b-a-left">
	<p className="mt-2" style={{marginLeft:"-32px", fontWeight:"600", fontSize:"0.9rem"}}>Before Usability Study</p>
	<img style={{height: "60vh"}} src={covaclofi} alt="Lo-fi-Mockup"/>
</div>
<div className="us-b-a us-b-a-right">
    <p className="mt-2" style={{marginLeft:"-32px", fontWeight:"600", fontSize:"0.9rem"}}>After Usability Study</p>
    <img style={{height: "60vh"}} src={covachifi} alt="Hi-fi-Mockup"/>
</div>

The CSS code is

.usability {
  position: relative;
  display: flex;
}

.us-b-a {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.us-b-a-right{
  transform: translate(-50%,0);
}
.us-b-a-left{
  transform: translate(50%,0);
}

 

Link to comment
Share on other sites

Hi @sarathchand19. It's super difficult to troubleshoot without a minimal demo - could you please provide one? It shouldn't be your whole project or anything - just the least possible markup/css/js to show the problem, even if it's just a few <div> elements. 

 

It kinda sounds like you may be dynamically loading things in such a way that when the page's onload fires or "DOMContentLoaded" (both of which fire a ScrollTrigger.refresh()), your elements aren't settled in their final positions. Remember, ScrollTrigger has to map out where all the start and end scroll positions are for your triggers (that's what .refresh() does), but if your layout gets shifted around AFTER the .refresh(), then those values may not be correct.

 

So I'd recommend EITHER make sure you run your ScrollTrigger/animation setup code AFTER your entire page is fully settled (no more layout shifts) -OR- just call ScrollTrigger.refresh() after you're sure that everything is in their final positions. The reason that opening Dev Tools may have "fixed" things is because that would trigger a "resize" event which calls ScrollTrigger.refresh() automatically. 

 

If you still need some help, please provide a minimal demo and we'd be happy to take a peek. 

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