Блог

Я застрял на странной проблеме в Gatsby, и она возникает только тогда, когда я хочу анимировать элементы с помощью плагина gsap и scrolltrigger. В принципе, когда я нажимаю <Link> элемент, все в порядке, но сразу после добавления в код анимации gsap на основе ScrollTrigger (обычный gsap работает нормально), что-то не так, и когда я использую <Link> его, он больше не работает должным образом. Он перенаправляет меня на правильный путь, но я не вижу ничего, кроме пустой страницы. Мне нужно обновить, чтобы увидеть фактическое содержимое этой страницы.

В принципе, я хочу создать классную анимацию вступления. Пользователь увидит экран с разрешением 100 вч с текстом и двумя блоками (красным и черным), и в зависимости от положения прокрутки одно поле переместится в сторону, а другое — в центр, и пользователь будет перенаправлен на страницу «/ что» после завершения всей последовательности (для этого я буду использовать navigate()).

У кого-нибудь есть идея, что может вызвать эту проблему? Я был бы рад помощи, потому что я застрял на этом… :/

 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;900amp;display=swap" rel="stylesheet"></link>
  <link href="https://fonts.googleapis.com/css2?family=Jura:wght@300;400;500;600;700amp;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
 

Я понял! 🙂 Проблема была в этой строке:

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

Я обработал основной div этого компонента как контейнер, чтобы настроить его таргетинг в scrollTrigger. Это сработало, но также что-то испортило в структуре компонентов react / gatsby (я думаю: D ) Я только что добавил под ним еще один div с соответствующей ссылкой, затем я нацелился на него, и теперь все работает отлично.

Подводя итог — просто не трогайте верхний lvl div, если вы хотите настроить таргетинг на контейнер 100vh при использовании gsap и scrollTrigger. 🙂