mikoo1991 Posted June 12, 2021 Share Posted June 12, 2021 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 More sharing options...
Rodrigo Posted June 12, 2021 Share Posted June 12, 2021 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!!! 1 Link to comment Share on other sites More sharing options...
mikoo1991 Posted June 12, 2021 Author Share Posted June 12, 2021 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 More sharing options...
mikoo1991 Posted June 12, 2021 Author Share Posted June 12, 2021 Sometimes when hot replacing, the animation triggers. But not after page refresh. Link to comment Share on other sites More sharing options...
mikoo1991 Posted June 13, 2021 Author Share Posted June 13, 2021 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 More sharing options...
mikoo1991 Posted June 13, 2021 Author Share Posted June 13, 2021 solved it. it was because my app container had overflow-x set to hidden. weird. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now