Jump to content
Search Community

ScrollTrigger Messing up GatsbyJS Scroll Position

FrankRuiz test
Moderator Tag

Recommended Posts


I've setup the following 'Reveal' component to use on my current project (GatsbyJS) and found that when navigating to a new page after scrolling to the next one, the next page does not start a the top. 

It basically sets up a ScrollTrigger on a given target element and can be passed an animation prop for different animations.

import React, { useRef, useLayoutEffect } from 'react';

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';


const ns = `reveal`;

const Reveal = ({ children, animation }) => {
	// target
	const targetElement = useRef();

	useLayoutEffect(() => {
		const target = targetElement.current;
	}, [animation]);

	return (
		<div ref={targetElement} className={`${ ns }`}>

Reveal.defaultProps = {
	// Set the defalut reveal functionality here, custom reveals
	// can be passed to Reveal using the callback prop
	animation: target => {
		// setting 'from' / initial styles here
		gsap.set(target, {
			y: 50,
			opacity: 0,
			transition: 'all 150ms linear',

		gsap.to(target, {
			// ScrollTrigger settings see link below for all options
			// https://greensock.com/docs/v3/Plugins/ScrollTrigger
			scrollTrigger: {
				start: 'top+=100 bottom',
				trigger: target,
				toggleActions: 'play none none reset',
			// setting 'to' / revealed styles here
			y: 0,
			opacity: 1,
			duration: 0.15,
			transition: 'all 150ms linear',

export default Reveal;

Anyone have any ideas as to why this behavior is happening?  I am thinking I need to kill the ST instances when the component unmounts/page changes. Adding ScrollTrigger.refresh(true) on the page change (layout component) did not make a difference. 

Link to comment
Share on other sites

Thanks for your responses guys. I did add a cleanup/Scrolltrigger.kill() to my useEffect but it did not fix the issue.  What does seems to have worked is adding a Scrolltrigger.refresh() in that useEffect. Not sure how that will impact performance though.


	useEffect(() => {

		const target = targetElement.current;

	}, [animation]);


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.
  • Create New...