Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Alexandra Spalato

ScrollTrigger in gatsbyjs

Recommended Posts


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! 🙂



Link to post
Share on other sites

Hey Alexandra. Have you already read through this thread? 


Link to post
Share on other sites

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.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)
}, [])
  • Like 3
Link to post
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.