Search the Community

Hello everyone, As we start 2025, I’ve decided to work on my new portfolio. I chose to use Next 15 out of curiosity. However, I quickly ran into an issue: the use of server and client components. For instance, in Hero.tsx, there is the MainTitle.tsx component which contains my H1. I’d like to animate this title without having to turn the entire component into a "use client" component (for SEO reasons). Are there any best practices for working with Next and GSAP while keeping SEO in mind and avoiding excessive use of "use client"? Thank you in advance 🙏 https://stackblitz.com/~/github.com/artveraa/portoflio-2025 =================================================== FRENCH VERSION : Bonjour à tous, En ce début d'année 2025, j'ai décidé de développer mon nouveau portfolio. J'ai choisi d'utiliser Next 15 par curiosité. Rapidement je suis confronté à un problème : l'utilisation des composants server et client. Par exemple, dans Hero.tsx se trouve le composant MainTitle.tsx qui comprend mon h1. J'aimerais animer ce titre sans avoir besoin de passer tout le composant en "use client" (pour des raisons de SEO). Est-ce qu'il existe des bonnes pratiques pour travailler avec Next et GSAP en tenant compte du SEO sans utiliser "use client" à outrance ? Merci par avance 🙏

Hi, I have created this page transition in my next.js app router, Now it works perfectly fine, However if i click on a link in navigation while the animation is running, it breaks the styling of pages, I found .revert() which will work , but instant reset of styling will lead to bad user experience, so what is before the new page animation to play is to wait for all the other animations to finish before starting, my page transition is exactly like this website:https://hagisbarbershop.de/, it just breaks if I change pages mid animation or too fast. page.jsx

How can I create this same animation with gsap and next js?

Hello everyone, I'm trying to create a simple text marquee. But in my case, the marquee is just getting repeated. But I was trying to make an infinite marquee.

The animtion should be start on when image top hit on viewport bottom but when I enabled markers then I see gsap taking image bottom as top so it's making problem like it's starting too late. 'use client' import Image from "next/image"; import "./process.scss"; import CalendarMonthIcon from '@mui/icons-material/CalendarMonth'; import StartIcon from '@mui/icons-material/Start'; import {useRef, useEffect} from 'react'; import gsap from 'gsap'; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); export default function ProcessSection() { const root1 = useRef(); const root2 = useRef(); const root3 = useRef(); const processArticleImage1 = useRef(); const processArticleImage2 = useRef(); const processArticleImage3 = useRef(); const processArticleHeading1 = useRef(); const processArticleHeading2 = useRef(); const processArticleHeading3 = useRef(); const process1Desc1 = useRef(); const process1Desc2 = useRef(); const process2Desc1 = useRef(); const process2Desc2 = useRef(); const process3Desc1 = useRef(); const process3Desc2 = useRef(); function animateElement({ triggerElement, scrub = .2, sx, x, opacity = 1, }) { gsap.fromTo( triggerElement, { x: sx, opacity: 0, }, { scrollTrigger: { trigger: triggerElement, start: 'top bottom', end: 'center center', scrub: true, invalidateOnRefresh: true, markers: true }, x: x, opacity: opacity, } ); } useEffect(()=>{ animateElement({ triggerElement: '.processArticleImage1', sx: -300, x: 0, }); },[]) return ( <section className="processSection" id="ourprocess" > <div className="bodyContainer"> <div className="processSectionWrapper" > <div className="processSectionHeading"> <h1>How We Work!</h1> </div> <div className="processWrapper container" > <div className="process" ref={root1}> <article className='singleProcess' > <Image ref={processArticleImage1} className="processArticleImage1" src="/process/meeting.svg" width={50} height={50} alt="how dsyncro work"/> <div className="processContent"> <div className="contentHeading"> <h2>Project Discovery and Planning</h2> </div> <div className="contentBody"> <p><span>Embark on a Creative Odyssey:</span> Dive deep into the client&apos;s vision through spirited initial meetings. Uncover the essence of their project goals, painting a vivid picture of the journey ahead.</p> <p><span>Blueprints to Brilliance:</span> Bring plans to life! Navigate the digital landscape with meticulous project planning, where wireframes and mockups sculpt the first strokes of your masterpiece..</p> </div> </div> </article> </div> <div className="process"> <article> <div className="processContent"> <div className="contentHeading"> <h2>Project Discovery and Planning</h2> </div> <div className="contentBody"> <p><span>Embark on a Creative Odyssey:</span> Dive deep into the client&apos;s vision through spirited initial meetings. Uncover the essence of their project goals, painting a vivid picture of the journey ahead.</p> <p><span>Blueprints to Brilliance:</span> Bring plans to life! Navigate the digital landscape with meticulous project planning, where wireframes and mockups sculpt the first strokes of your masterpiece..</p> </div> </div> <Image src="/process/development.svg" width={50} height={50} alt='How dsyncro development'/> </article> </div> <div className="process"> <article> <Image src="/process/meeting.svg" width={50} height={50} alt="how dsyncro work"/> <div className="processContent"> <div className="contentHeading"> <h2>Project Discovery and Planning</h2> </div> <div className="contentBody"> <p><span>Embark on a Creative Odyssey:</span> Dive deep into the client&apos;s vision through spirited initial meetings. Uncover the essence of their project goals, painting a vivid picture of the journey ahead.</p> <p><span>Blueprints to Brilliance:</span> Bring plans to life! Navigate the digital landscape with meticulous project planning, where wireframes and mockups sculpt the first strokes of your masterpiece..</p> </div> </div> </article> </div> </div> <div className="processSectoionFooter"> <span className="CTA-Qoute"> Get a Qoute <StartIcon /> </span> <span className="CTA_Schedule"> <CalendarMonthIcon /> Schedule a Call</span> </div> </div> </div> </section> ); }