Search the Community

Hello everyone, I am working on a NextJS project with Tailwind CSS and new to GSAP. This is my code for the menu component <MobileMenu> in the mobile website which when clicked opens a full screen menu with close icon on the same place where menu open icon used to be (lets call it Original Position). This is the animation i am trying to achieve https://codepen.io/nothing4us/pen/qBKyQYR. But my component does not animates this way. I have been trying this to work since last 5 days and finally I am here to ask your help. Original Position (Initial Position): The location where menu open and close icons are placed. Right side of the Header bar. Objective: Clicking the open menu icon should move the menu-trigger-bars to the top right direction out of the screen and close-trigger-bars should come to their place, i.e. to the original position and forming 'X' icon. Clicking the close icon should do same animation but in reverse, i.e. close-trigger-bars going out of the screen and menu-trigger-bars coming back to the original position. What my code does: Triggering the menu open icon doesn't do any animation to the menu-trigger-bars but the close-trigger-bars do animate, not in the intended way. close-trigger-bars are moving to the bottom left and bottom right from the original position (where it should arrive). The motion of the close-trigger-bars plays twice, progressively continues going to their respective directions. Triggering the menu close icon doesn't do any animation to the close-trigger-bars but the menu-trigger-bars do animate in their intended way, i.e. coming from top right side (outside of the screen) to the original position. I have placed console.log to check the close and open animation. They are working fine and only once on every trigger. What am I doing wrong? Please help me fix this issue. @Rodrigo @GreenSock 'use client'; import { useState, useRef, useEffect } from 'react'; import { gsap } from 'gsap'; const MobileMenu = () => { const [isOpen, setIsOpen] = useState(false); const topBarRef = useRef(null); const closeTriggerRef = useRef(null); const tlOpen = useRef(gsap.timeline({ paused: true })); const tlClose = useRef(gsap.timeline({ paused: true })); useEffect(() => { // Animation for opening the menu tlOpen.current.add("preOpen") .to('.menu-trigger-bar.top', { x: 80, y: -80, delay: 0.1, ease: 'power4.in' }, "preOpen") .to('.menu-trigger-bar.middle', { x: 80, y: -80, ease: 'power4.in' }, "preOpen") .to('.menu-trigger-bar.bottom', { x: 80, y: -80, delay: 0.2, ease: 'power4.in' }, "preOpen") .add("open", "-=0.4") .add("preClose", "-=0.8") .to('.close-trigger-bar.left', { x: "-=100px", y: "+=100px", ease: 'power4.out' }, "preClose") .to('.close-trigger-bar.right', { x: "+=100px", y: "+=100px", delay: 0.2, ease: 'power4.out' }, "preClose"); // Animation for closing the menu tlClose.current.add("close") .to('.close-trigger-bar.left', { x: "+=100px", y: "-=100px", ease: 'power4.in' }, "preClose") .to('.close-trigger-bar.right', { x: "-=100px", y: "-=100px", delay: 0.1, ease: 'power4.in' }, "preClose") .to('.menu-trigger-bar.top', { x: 0, y: 0, delay: 0.2, ease: 'power4.out' }, "close") .to('.menu-trigger-bar.middle', { x: 0, y: 0, ease: 'power4.out' }, "close") .to('.menu-trigger-bar.bottom', { x: 0, y: 0, delay: 0.3, ease: 'power4.out' }, "close"); }, []); const toggleMenu = () => { if (isOpen) { tlClose.current.play(0); // Start the timeline from the beginning console.log('Playing close animation'); } else { tlOpen.current.play(0); // Start the timeline from the beginning console.log('Playing open animation'); } setIsOpen(!isOpen); }; return ( <> <button onClick={toggleMenu} className="text-gray-700 hover:text-gray-900 focus:outline-none z-50 relative w-8 h-8" > <span className="menu-trigger w-full h-full" style={{ display: isOpen ? 'none' : 'block' }}> <i ref={topBarRef} className="menu-trigger-bar top"></i> <i className="menu-trigger-bar middle"></i> <i className="menu-trigger-bar bottom"></i> </span> <span ref={closeTriggerRef} className="close-trigger w-full h-full" style={{ display: isOpen ? 'block' : 'none' }}> <i className="close-trigger-bar left"></i> <i className="close-trigger-bar right"></i> </span> </button> {isOpen && ( <div className="fixed inset-0 bg-white z-40 flex flex-col items-center justify-center"> <nav className="space-y-4"> {/* Navigation links */} <a href="/" className="text-gray-700 hover:text-gray-900 text-2xl" onClick={toggleMenu}>Home</a> <a href="/about" className="text-gray-700 hover:text-gray-900 text-2xl" onClick={toggleMenu}>About</a> <a href="/services" className="text-gray-700 hover:text-gray-900 text-2xl" onClick={toggleMenu}>Services</a> <a href="/contact" className="text-gray-700 hover:text-gray-900 text-2xl" onClick={toggleMenu}>Contact</a> </nav> </div> )} </> ); }; export default MobileMenu;

I am using NEXT JS 13 with 'app' dir, within it with the help of loader.tsx and page.tsx I'm trying to create a number % loading animation using gsap, but there is no rendering of data from loading.tsx file and I'm can't able to identify the problem with my code. link to demo file - https://stackblitz.com/edit/stackblitz-starters-wlywtf?embed=1&file=app%2Floading.tsx I want loading animation similar to this. reference - DuallStudio . Creative Digital Studio page.tsx - export default async function Home() { await new Promise((resolve) => setTimeout(resolve, 3000)); return ( <main> <section className="flex justify-start"> <span className="text-7xl relative"> Hello <br /> there <span className="absolute top">?</span> </span> </section> </main> ); } loading.tsx - // Loading.js 'use client' import { useEffect } from 'react'; import gsap from 'gsap'; const Loading = () => { useEffect(() => { const tl = gsap.timeline({ repeat: -1 }); tl.to('.preloader', { width: '100%', duration: 1, ease: 'power1.inOut', }).to('.preloader', { width: '0%', duration: 1, ease: 'power1.inOut' }); }, []); return ( <div className="fixed flex justify-center items-center w-screen h-screen z-[1000]"> <div className="preloader"></div> </div> ); }; export default Loading;

I want to achieve the text animation when we scroll in that specific component in React JS using Tailwind CSS. Currently I'm getting animations Line by Line and when I reverse the scroll the text gets disappeared, whereas, I want the animations to be displayed Character by Character like the link I'm sharing below: But I want to use this in React JS and instead of SplitText, I want to use SplitType NPM Package I'm attaching my code file below for further reference. Please guide me to achieve the functionality. FreshIdeaTesting.js

Hello, I'm currently working on a project where I would need to pin a container and keep the scroll going in the right column. However I'm running into an issue where the ScrollTrigger markers seems to be offset with the panels. I can't get the left content ends when it reaches the next trigger. Here is a simplified version: https://codesandbox.io/s/romantic-fast-xwfefy I notice that the speed of the right columns seems to be "parrallaxed" to the markers. What I am trying to do: Coordinate the appearing of the pinned left content while scrolling the right content. Thank you

Hi guys im trying to use scrollsmoother on my website with tailwindcss however whenever i add data speed to an element it causes the element to just be fixed to the final position relative to where its heading according to the scrollsmoother if it were to smooth the divs on scroll . I have no idea why this is happening, i tried forking other scrollsmoother demos without tailwind and had no issues whatsoever. if someone could provide me with an explanation and or solution it would be much appreciated. Ive attached a codesandbox demo below however i have no idea how to attach the gsap scrollsmother dependency but i linked all the necessary code files within the sandbox. Sorry guys im very new to using codesandbox. I also have images below of the issue. https://codesandbox.io/s/zen-lake-pxlpm0