Search the Community

Hello. I'm completely new to gsap and now struggling with some issues. I have written the code below in React/Next js & tailwind, I don't set the p-s-content to overflow hidden because I need to track the scrollbar, when the user gets to the .p-s-content just begin the horizontal scrolling with .parent-section pinned. <section className={`${className} parent-section w-full h-fit flex flex-col justify-between items-center gap-8 mt-[120px] mb-16`} > <h2 className="w-full h-fit text-left text-section text-[40px] font-bold"> {title ?? "Title"} </h2> <div className="p-s-content relative w-full h-full flex justify-between items-start gap-11"> {contents?.map((item: IContent, key: number) => { return ( <div ref={sliderRef} className="w-fit flex flex-row justify-between items-center gap-8 flex-nowrap" > <div key={key} className="w-max h-full flex flex-col justify-between items-start gap-12" > <h3 className="text-[200px] text-left pl-[10px] font-bold text-blue-1"> {item?.title} </h3> <div className="w-full max-w-[546px] h-full flex flex-col justify-between items-center gap-8"> <p className="text-paragraph text-paragraph-size font-normal leading-10 tracking-[0.8px] pl-[10px]"> {item?.abstract} </p> </div> </div> <Image key={key} className="p-s-img aspect-square max-w-[515px] max-h-[515px] object-cover" src={item?.image} alt={item?.title} /> </div> ); })} </div> </section> I tried some demos of the forum but it just didn't suit my case but got me to the code below . (Calculations just made me more and more confused) the pinned element, when I reach the "start" of it , it just get to the bottom of the page and wouldn't stick in it's initial location, so the scrolling, consume I have five items, just went to the middle of the second one and stops. imageSliderRef && gsap.to(".p-s-content", { ease: "none", x: () => +(imageSliderRef.scrollWidth - window.innerWidth), scrollTrigger: { trigger: ".p-s-content", pin: ".parent-section", start: "top", end: () => `-=${imageSliderRef.scrollWidth - window.innerWidth}`, scrub: 1, invalidateOnRefresh: true, markers: true, }, }); Actually I want the .parent-section stuck to it's position and the scrolling reach the end of the width of the .p-s-content. I Couldn't provide any Codepen example but I just made sure I've explained clearly. Thank you.

Can someone help, I'm trying to avoid the flesh of the text on the screen (FOUC). Also I'm trying to animate the text one by one, but seems like the timeline does not work as it supposed to. 'use client' import gsap from 'gsap-trial' import { useGSAP } from '@gsap/react' import { useRef } from 'react' import SplitText from 'gsap-trial/SplitText' gsap.registerPlugin(SplitText) export default function Page() { const container = useRef<HTMLElement | null>(null) const tl = useRef<GSAPTimeline | null>(null) useGSAP( () => { const titles = gsap.utils.toArray<Element>('p', container.current) titles.forEach(title => { const splitTitle = new SplitText(title) tl.current = gsap .timeline() .from( splitTitle.lines, { opacity: 0, y: 20, stagger: 0.02, autoAlpha: 0 }, '<' ) .to( splitTitle.lines, { opacity: 0, y: -20, stagger: 0.02, autoAlpha: 1 }, '<1' ) }) }, { scope: container } ) return ( <section ref={container} className='flex justify-center items-center h-screen' > <div className='text-2xl leading-[0px] invisible'> <p>My name is Illia</p> <p>I am a cool guy</p> <p>Great developer</p> <p>and a funny fellow</p> </div> </section> ) }

I have a menu drawer that has a ul with 6li's in it next.js, react, gsap, tailwind. I need to animate them, currently I am creating timelines for each li and creating refs then on mouse enter and mouse leave on the lis I am manipulating the specific timeline (playing and pausing it) using the index. I wanted to know if this is the most optimised way of doing this or not? MenuDrawer.js

Hi again all, Supplied a codepen this time. Trying to get the onEnter and onLeave animations to work in a Flip filter animation. But the assets seem to keep popping in and out but only works sometimes. Been trying to debug for a few hours now but think I've hit a wall.

Hi all, Been trying to get a Vue with Tailwind implementation of the Flex Box example going for a couple of hours now but can't seem to make any headway on it. I must be missing something really simple but it just won't animate the flipping even though I'm just toggling 1 class. Any help would be greatly appreciated. Code is below. <template> <div class="flex w-screen h-screen group" @click="toggleDirection()" :class="{ 'flex-col' : col_mode }"> <div class="grid flex-1 text-5xl text-white bg-red-600 box place-items-center">1</div> <div class="grid flex-1 text-5xl text-white bg-blue-600 box place-items-center">2</div> <div class="grid flex-1 text-5xl text-white bg-green-600 box place-items-center">3</div> <div class="grid flex-1 text-5xl text-white bg-yellow-300 box place-items-center">4</div> </div> </template> <script> import gsap from 'gsap'; import { Flip } from "gsap/Flip"; export default { name: 'Home', data() { return { col_mode: false, state: null } }, mounted () { gsap.registerPlugin(Flip); }, methods: { toggleDirection() { this.state = Flip.getState('.group, .box'); this.col_mode = !this.col_mode Flip.to(this.state, { absolute: true, duration: 1, stagger: .2 }) } }, } </script>