github/pse.dev
1
1
Fork 0
mirror of https://github.com/privacy-scaling-explorations/pse.dev.git synced 2026-04-23 03:01:03 -04:00
Code Issues Packages Projects Releases Wiki Activity

revert: 💫 Remove animation from WhatWeDo section

Browse Source
This commit is contained in:
thebeyondr
2023-06-29 10:37:42 -05:00
parent 462c0666a7
commit 240ca23de0
1 changed files with 29 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
components/sections/WhatWeDo.tsx
View File

@@ -1,11 +1,5 @@
"use client"
import { useEffect } from "react"
import NextImage from "next/image"
import PSELogoCircle from "@/public/pse-logo-circle.svg"
import { gsap } from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger"
import { cn } from "@/lib/utils"
const content = [
@@ -30,33 +24,33 @@ const content = [
]
const WhatWeDo = () => {
useEffect(() => {
const mm = gsap.matchMedia()
// useEffect(() => {
// const mm = gsap.matchMedia()
mm.add("(min-width: 1024px)", () => {
gsap.registerPlugin(ScrollTrigger)
const tl = gsap.timeline({
scrollTrigger: {
trigger: ".badge-start-trigger",
start: "top center",
end: "+=550",
scrub: 1,
// markers: true,
},
})
// mm.add("(min-width: 1024px)", () => {
// gsap.registerPlugin(ScrollTrigger)
// const tl = gsap.timeline({
// scrollTrigger: {
// trigger: ".badge-start-trigger",
// start: "top center",
// end: "+=550",
// scrub: 1,
// // markers: true,
// },
// })
tl.from("#privacy", { fill: "#E1523A" }, "+=0.5")
.to(".badge-right", { y: 50, ease: "ease-out" }, "+=1")
.to("#privacy", { fill: "#111827", ease: "ease-out" }, "+=0.5")
.to(".badge-right", { y: 100, ease: "ease-out" })
.to("#scaling", { fill: "#E1523A", ease: "ease-in" })
.to(".badge-right", { y: 250, ease: "ease-out" }, "+=1")
.to(".badge-right", { y: 350, ease: "ease-out" })
.to("#scaling", { fill: "#111827", ease: "ease-out" })
.to("#explorations", { fill: "#E1523A", ease: "ease-in" })
.to(".badge-right", { y: 550, ease: "ease-out" })
})
}, [])
// tl.from("#privacy", { fill: "#E1523A" }, "+=0.5")
// .to(".badge-right", { y: 50, ease: "ease-out" }, "+=1")
// .to("#privacy", { fill: "#111827", ease: "ease-out" }, "+=0.5")
// .to(".badge-right", { y: 100, ease: "ease-out" })
// .to("#scaling", { fill: "#E1523A", ease: "ease-in" })
// .to(".badge-right", { y: 250, ease: "ease-out" }, "+=1")
// .to(".badge-right", { y: 350, ease: "ease-out" })
// .to("#scaling", { fill: "#111827", ease: "ease-out" })
// .to("#explorations", { fill: "#E1523A", ease: "ease-in" })
// .to(".badge-right", { y: 550, ease: "ease-out" })
// })
// }, [])
return (
<section className="badge-start-trigger relative flex flex-col gap-4 lg:grid lg:grid-cols-4 lg:gap-0">
@@ -65,7 +59,10 @@ const WhatWeDo = () => {
</h2>
<div className="order-3 flex max-w-xl flex-col gap-2 pt-6 lg:order-none lg:col-span-2 lg:mx-auto lg:gap-6">
{content.map((item, index) => (
<article className={cn("pb-12 lg:px-6 lg:pb-24", item.className)} key={index}>
<article
className={cn("pb-12 lg:px-6 lg:pb-24", item.className)}
key={index}
>
<h3 className="text-2xl xl:text-3xl">{item.title}</h3>
<div className="p-2"></div>
<p className="xl:text-lg">{item.description}</p>