Scroll Trigger not working at start

[sarathchand19]

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);
}

 

[GreenSock]

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. 

[sarathchand19]

I will try using ScrollTrigger.refresh()