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