mikoo1991

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;

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

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

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

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

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.