[GSAP ScrollTrigger doesnt work on box]

Hello,

I am trying to learn GSAP and i want some elements to slide into view when scrolling, and I found a ScrollTrigger plugin for GSAP. However, it doesnt work. It slides back when scrolling up, but when scrolling down, nothing shows up.

 

import { useLayoutEffect, useState } from "react";
import reactLogo from "./assets/react.svg";
import "./App.css";
import gsap from "gsap";
import styled from "styled-components";

import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

const Container = styled.div`
  height: 4000px;
`;

function App() {
  const [count, setCount] = useState(0);

  useLayoutEffect(() => {
    gsap.from(".box", {
      scrollTrigger: {
        trigger: ".box",
        start: "top center",
        end: "bottom center",
        scrub: true,
        markers: true,
      },
      x: -1500,
      opacity: 0,
    });
  }, []);

  return (
    <>
      <Container>Hello World</Container>
      <div
        className="box"
        style={{ backgroundColor: "red", width: 300, height: 300 }}
      ></div>
      <Container></Container>
    </>
  );
}

export default App;

 

[GSAP 3 doesnt work with nextjs]

solved it. it was because my app container had overflow-x set to hidden. weird.

[GSAP 3 doesnt work with nextjs]

My current code.

 

The start (not scrollstart) is always at the center of the window, not sticky to the trigger location.

[GSAP 3 doesnt work with nextjs]

Sometimes when hot replacing, the animation triggers. But not after page refresh.

[GSAP 3 doesnt work with nextjs]

6 minutes ago, Rodrigo said:

Hi and welcome to the GreenSock forums.

 

In order to make the plugins work in Next you need to import them from the dist folder:

import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

Finally if you run into some issues with the register part, be sure to check for the window object and not the process.browser property:

if (typeof window !== "undefined") {
  gsap.registerPlugin(ScrollTrigger);
}

Happy Tweening!!!

doesnt work. my code is:

 

import React, {useEffect, useRef, useState} from "react";
import styled from "styled-components";
import { Container, Spacer } from "../UI";
import { Wrapper } from "../UI/Wrapper";
import { useTranslation } from "react-i18next";
import { Text } from "components/UI/Text";
import { useInView } from 'react-intersection-observer';
import AOS from "aos";
import 'aos/dist/aos.css';
import gsap from "gsap";
import {ScrollTrigger} from "gsap/dist/ScrollTrigger";

const ContentContainer = styled.section`
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: flex-start;
  width: 100%;
  margin: 0 auto 0;
  justify-items: center;

  @media screen and (max-width: 600px) {
    grid-template-columns: 1fr;
  }
`;

const LogoStyle = styled.img`
  max-height: 500px;
  width: 100%;
`;

interface ContentProps {
  inView: boolean
}
const Content = styled.article<ContentProps>`
  & h2 {
    color: black;
    font-size: 36px;
    line-height: 1;
    margin-bottom: 2rem;
    transform: ${props => props.inView ? "translateX(0)" : "translate(-150px)"};
    opacity: ${props => props.inView ? 1 : 0};
    transition: all 1s ease-in-out;
  }

  & h2 span {
    color: var(--primary);
  }
`;

const Card = styled.div`
  border-radius: 10px;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  padding: 1rem;
  margin-bottom: 1.5rem;
  background-color: white;

  & aside {
    display: flex;
    align-items: center;

    & i {
      font-size: 25px;
      color: var(--primary);
      margin-right: 1rem;
    }
  }

  &:last-child {
    margin-bottom: 0;
  }
`;

export default function AboutPlatform() {
  const { t } = useTranslation("home");

  const {ref, inView} = useInView()
  const [timeline, setTimeline] = useState(gsap.timeline({paused: false}))

  useEffect(() => {

    if (typeof window !== "undefined") {
      gsap.registerPlugin(ScrollTrigger);
    }
    timeline.from(".about-platform-card", {opacity: 0, duration: 1, stagger: 0.25, scrollTrigger: {trigger: "#about-platform-section", markers: true}})
  }, [])

  useEffect(() => {

    if (inView) {
      //timeline.play()
    } else {

    }
  }, [inView])

  return (
    <Wrapper white>
      <Container id="about-platform">
        <ContentContainer>
          <Content id="about-platform" inView={inView}>
            <h2>
              What kind of <span>platform</span> is this?
            </h2>

            <Text block color="#bebebe" size="18px">
              I developed this platform for various reasons. It's my business
              card, my blog, my e-commerce and my very own private code-teaching
              area. You can order a 1-on-1 session easily and learn code from a
              professional.
            </Text>
            <Spacer bottom="2rem" />
            <div ref={ref} id="about-platform-section">
              <Card className="about-platform-card">
                <aside>
                  <i className="fas fa-check" />
                  <p>{t("platform_info4")}</p>
                </aside>
              </Card>
              <Card className="about-platform-card">
                <aside id="about-platform-trigger-1">
                  <i className="fas fa-check" />
                  <p>{t("platform_info2")}</p>
                </aside>
              </Card>
              <Card className="about-platform-card">
                <aside>
                  <i className="fas fa-check" />
                  <p>{t("platform_info3")}</p>
                </aside>
              </Card>

              <Card className="about-platform-card">
                <aside>
                  <i className="fas fa-check" />
                  <p>You can learn more about me</p>
                </aside>
              </Card>
            </div>
          </Content>
          <LogoStyle src="/mikolaj19.jpg" alt="logo" />
        </ContentContainer>
      </Container>
    </Wrapper>
  );
}

 

[GSAP 3 doesnt work with nextjs]

Hello,

I downloaded latest gsap library for my NextJS project, and Scrolltrigger doesnt work. I use markers, and only two markers appear on the page, the top and bottom, but not the trigger markers. They appear only when i make a change in code, and hot replacement takes place.