ScrollTrigger in gatsbyjs

[Alexandra Spalato]

Hello,

I'm working on a gatsby project, I first did the animation with scrollmagic, but now I wanted to better do it with the new ScrollTrigger plugin

it works, but I struggled as on develop first pin and scrub wheren't working

after I made a build, then it was working

but the animation doesn't work perfectly on develop

this is the online version, so after build https://falcon-lab.netlify.app/, here all is fine

but on my computer after running gatsby develop it doesn't work the same https://share.getcloudapp.com/DOuAedyZ here first scroll is the develop version, and second scroll is the built version

so even if it works, it makes hard to develop, or I will need to first do everything in html

I have attached the component file

Thanks in advance! 🙂

 

Parallax.js

[ZachSaucier]

Hey Alexandra. Have you already read through this thread? 

 

[Alexandra Spalato]

I saw it, but now looking better I found the solution, I need to put the register plugin into useEffect 

like that, and now all work the same in develop!

useEffect(() => {

if (typeof window !== `undefined`) {

gsap.registerPlugin(ScrollTrigger)

gsap.core.globals('ScrollTrigger', ScrollTrigger)

}

let tl = gsap.timeline({

paused: true,

scrollTrigger: {

trigger: '.slideOne',

scrub: true,

pin: true,

// markers: true,

start: 'top top',

end: 'bottom top',

},

})

tl.to('.overlay', 2, { backgroundColor: 'rgba(0,0,0,.85)' })

tl.to('.textOne', 1, { y: -300, autoAlpha: 0 }, 0)

tl.to('.textTwo', 1, { y: -300, autoAlpha: 1 }, 0.5)

}, [])