0

I'm stuck on a strange issue in Gatsby and it occurs only when I want to animate elements with gsap and scrolltrigger plugin. Basically when I click <Link> element everything is ok, but immediately after I add in code gsap animation based on ScrollTrigger (normal gsap is working fine) something is wrong and when I use <Link> it doesn't work properly anymore. It's redirecting me to proper path but I see nothing but a blank page. I need to refresh to see actual content of that page.

Basically I want to create cool intro animation. User will see 100vh screen with text and two boxes stacked (red and black) and basing on scroll position one box will move to the side and another to the center, and user will be redirected to "/what" page after completing whole sequence (I'll use navigate() for that).

Someone has an idea what might cause this problem? I would be glad for help because I'm stuck on this... :/

import React from "react"
import { Helmet } from 'react-helmet'
import {useEffect, useRef} from "react"
import Layout from "../components/layout"
import viewStyles from "../components/modules/index.module.css"
import {gsap} from "gsap"
import {ScrollTrigger} from "gsap/ScrollTrigger"
import { navigate } from 'gatsby'
gsap.registerPlugin(ScrollTrigger);




// markup
const IndexPage = () => {


  const redboxRef = useRef(null);
  const blackboxRef = useRef(null);
  const containerRef = useRef(null);
  const textRef = useRef(null);
  const circleRef = useRef(null);

  useEffect(()=>{

    
    const tl = gsap.timeline();

    tl.to(redboxRef.current, {x: 1000, rotation: 100, scrollTrigger: {
      trigger: containerRef.current,
      start: "top top",
      end:"+=1000",
      scrub: 1.5,
      pin: true,
    }});
    
  })


return (
   <div id="container" ref = {containerRef}>

  <Helmet>
  
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"></link>
  <link href="https://fonts.googleapis.com/css2?family=Jura:wght@300;400;500;600;700&display=swap" rel="stylesheet"></link>
  </Helmet>

  <Layout>
  <div className={viewStyles.introwrapper}>

            
            <div ref={textRef} className={viewStyles.leftside}>
            <h1><span>zen</span>coded</h1>
            <p>we code future</p>
           
            

            </div>

            

            
            <div className={viewStyles.rightside}>

           
            <div className={viewStyles.boxwrapper}>

            <div className={viewStyles.rbwrapper}>

            <div ref={blackboxRef} className={viewStyles.blackbox}>
              
            <svg ref={circleRef} className={viewStyles.circle} width="32px" height="32px" viewBox="0 0 106 106" version="1.1" xmlns="http://www.w3.org/2000/svg" >
    <title>Circle</title>
    <g id="Version4-12.11-(11-name-chose)" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
        <g id="Home-Copy-14" transform="translate(-862.000000, -346.000000)">
            <g id="Circle" transform="translate(862.000000, 346.000000)">
                <circle id="Oval-Copy" stroke="#FFFFFF" strokeWidth="0.2" cx="53" cy="53" r="52.9"></circle>
                <circle id="Oval-Copy-2" stroke="#FFFFFF" strokeWidth="0.2" cx="52.5" cy="53.5" r="46.4"></circle>
                <circle id="Oval-Copy-3" stroke="#FFFFFF" strokeWidth="0.2" cx="53" cy="53" r="39.9"></circle>
                <circle id="Oval-Copy-4" stroke="#FFFFFF" strokeWidth="0.2" cx="53" cy="53" r="32.9"></circle>
                <circle id="Oval-Copy-5" stroke="#FFFFFF" strokeWidth="0.2" cx="52.5" cy="53.5" r="26.4"></circle>
                <circle id="Oval-Copy-6" stroke="#FFFFFF" strokeWidth="0.2" cx="53" cy="53" r="19.9"></circle>
                <circle id="Oval-Copy-7" stroke="#FFFFFF" strokeWidth="0.2" cx="52.5" cy="53.5" r="13.4"></circle>
                <circle id="Oval-Copy-8" stroke="#FFFFFF" strokeWidth="0.2" cx="52.5" cy="53.5" r="6.4"></circle>
                <circle id="Oval-Copy-10" fill="#FFFFFF" cx="52.5" cy="53.5" r="1.5"></circle>
            </g>
        </g>
    </g>
</svg>
                
            </div>
            <div ref={redboxRef} className={viewStyles.redbox}>
            <ul>
                <li ref={redboxRef} className={viewStyles.redboxtext}>ux</li>
                <li className={viewStyles.redboxtext}>web</li>
                <li className={viewStyles.redboxtext}>code</li>
            </ul>
            <a>more</a>
    
            </div>
                
            </div>

           
            </div>
            
           

            </div>

            

        </div>

  </Layout>
    
   </div>
  )
}

export default IndexPage
Piotr A
  • 51
  • 5
  • I realized that the problem is caused by ScrollTrigger value -> pin. Problem occurs only when this option is applied. – Piotr A Dec 05 '20 at 14:07
  • Guys, it's so strange. I've second project on which I have created exactly the same animation with all settings the same. Of course it's also written in Gatsby. On this project is working completely fine but on my main project they won't... It's so weird.. – Piotr A Dec 05 '20 at 14:28

1 Answers1

1

I got it! :) Problem was in this line:

 <div id="container" ref = {containerRef}>

I treated main div of that component as container in order to target it in scrollTrigger. It worked but it also messed up something with react/gatsby component structure (i guess :D ) I've just added another div under it with adequate ref, then I targeted it and now everything works perfectly.

To summarize - just don't touch top lvl div if you want to target 100vh container when you use gsap and scrollTrigger. :)

Piotr A
  • 51
  • 5