Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mikoo1991

GSAP 3 doesnt work with nextjs

Recommended Posts

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.

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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>
  );
}

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

My current code.

 

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

Link to comment
Share on other sites

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

  • Like 1
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.
×