Search the Community

Hi I want to create a Flip from the header to a new page like this website But when I click it don't append the child to the container I can't access to codepen in my country So I have created a stackblitz page instead

I have been stuck here for a week. I'm trying to make a scroll snap from section 1 to section 2 with a delay time for exit animation and reverse. From section 2 to section 4 it can be a normal scroll. I'm using overflow: hidden that I can't let it go. This is the reason that I think it prevents me from scrolling snap and normal scroll. The scroll way I try to achieve is exactly the same as this website: David | Creative Developer (david-hckh.com) Here is the codesandbox : https://codesandbox.io/s/scroll-rfjx9k How can I achieve this ? Please help me with this....

We seek a talented GSAP expert to join our team on a 1-month full-time contract. The ideal candidate will develop and maintain a 🎨 Design Editor Tool 🛠️ with complex animations using GSAP in ReactJS applications. 👀 Please note 👀 we require experience and a solid understanding of Canvas and creating Canvas-based animations. Responsibilities: • Develop and maintain animations in ReactJS applications using GSAP. • Collaborate with the design team to create visually stunning and responsive animations. • Optimize animations for performance across devices and browsers. • Integrate and synchronize audio and video elements within the application. • Create interactive and engaging user interfaces with Canvas animations. • Troubleshoot and resolve animation-related issues. • Research and develop new animations based on the core GSAP library. Requirements: • Proven experience as a GSAP ReactJS Developer. • Strong proficiency in ReactJS and TypeScript. • Extensive experience with GSAP and complex animations. • Solid understanding of Canvas and creating Canvas-based animations. • Experience with integrating audio and video elements in web applications. • Strong knowledge of HTML5, CSS3, and responsive design principles. • Excellent problem-solving skills and attention to detail. • Strong communication skills and team collaboration.

I have been trying to code https://codepen.io/GreenSock/pen/bGaWjpw this into my react component using the useGsap Hook as suggested by the docs, but I am not quite sure about how to use it? Please correct me if i am going wrong! Need Help! import './gsap.css' import gsap from 'gsap'; import { useGSAP } from '@gsap/react'; import { ScrollSmoother, SplitText } from 'gsap/all'; gsap.registerPlugin(useGSAP); const Gsapeffect = () => { useGSAP(() => { const smoother = ScrollSmoother.create({ wrapper: "#wrapper", content: "#content", smooth: 1, normalizeScroll: true, ignoreMobileResize: true, effects: true, preventDefault: true, }); gsap.set(".heading", { yPercent: -150, opacity: 1, }); let tl = gsap.timeline(); let mySplitText = new SplitText("#split-stagger", { type: "words,chars" }); let chars = mySplitText.chars; chars.forEach((char, i) => { smoother.effects(char, { speed: 1, lag: (i + 1) * 0.1 }); }); }, []); return ( <> <div id="wrapper"> <section id="content"> <div className="heading" aria-hidden="true"> <p>smooooth</p> <div className="text-container"> <p>scrolling</p> <p data-speed="0.95">scrolling</p> <p data-speed="0.9">scrolling</p> <p data-speed="0.85">scrolling</p> <p data-speed="0.8">scrolling</p> <p data-speed="0.75">scrolling</p> <p data-speed="0.7">scrolling</p> </div> </div> <section className="image-grid container"> <div className="image_cont" data-speed="1"> <img data-speed="auto" src="https://images.unsplash.com/photo-1556856425-366d6618905d?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTV8fG5lb258ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=60" alt="" /> </div> <div className="image_cont" data-speed="1.7"> <img data-speed="auto" src="https://images.unsplash.com/photo-1520271348391-049dd132bb7c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" alt="" /> </div> <div className="image_cont" data-speed="1.5"> <img data-speed="auto" src="https://images.unsplash.com/photo-1609166214994-502d326bafee?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" alt="" /> </div> </section> <section className="title container flow--lg"> <h1> <span className="eyebrow" aria-hidden="true"> with{" "} </span> GSAP scrollsmoother </h1> <p> Seamlessly integrated with GSAP and ScrollTrigger. Leveraging native scrolling - no "fake" scrollbars or event hijacking. </p> </section> <section className="bars container"> <div className="bars-text"> <div className="flow content"> <h2>Speed Control</h2> <p> Animate elements along at different speeds, slow them down or make them whizz past. </p> </div> </div> <div className="bars-cont"> <div className="bar" data-speed="0.8"> <p>0.8</p> </div> <div className="bar" data-speed="0.9"> <p>0.9</p> </div> <div className="bar" data-speed="1"> <p>1</p> </div> <div className="bar" data-speed="1.1"> <p>1.1</p> </div> <div className="bar" data-speed="1.2"> <p>1.2</p> </div> </div> </section> <section className="v-center"> <div className="parallax-slab"> <img data-speed="auto" src="https://assets.codepen.io/756881/smoothscroller-1.jpg" alt="" /> </div> </section> <section className="staggered container"> <div className="staggered_text"> <div className="flow content"> <h2>Add some lag (the good kind!)</h2> <p> loosen the connection to the scroll to give a feeling of 'follow through.' </p> </div> </div> <div className="staggered_demo"> <h3 id="split-stagger">stagger...</h3> </div> </section> <section className="parallax-images container"> <div className="parallax-text"> <div className="flow content"> <h2>Easy parallax image effects</h2> <p> Pop your images in a container with overflow hidden, size them a little larger than the container and set data-speed to auto. GSAP does the rest. </p> </div> </div> <div className="image_cont"> <img data-speed="auto" src="https://assets.codepen.io/756881/neon3.jpg" alt="" /> </div> <div className="image_cont"> <img data-speed="auto" src="https://assets.codepen.io/756881/neon2.jpg" alt="" /> </div> </section> <section className="spacer"></section> </section> </div> </> ); }; export default Gsapeffect;

Hi everyone, I'm working on a Next.js project using GSAP and ScrollTrigger for horizontal scrolling. At the end of the horizontal scroll, I want the last panel to split into left and right sections. The left section should pin while the right section scrolls vertically. CodePen Example : Horizontal Scroll Example StackBlitz Project : Pin Left Section and Scroll Right

Hi, I would like to know how to play to specific points in the timeline using labels example code using only Javascript provided by Snorkl.tv https://codepen.io/snorkltv/pen/vYOOgBQ but when i tried to do the same thing using React is not working as expected, code : https://stackblitz.com/edit/stackblitz-starters-wuzvf4?file=app%2Fdynamic-timeline.tsx

Hi guys, i want to make somthing like this one below: https://monogrid.com/about it's a cool effect with background animation

Hello there, I'm trying to do the scroll pin animation in reactjs. There I'm using swiper and gsap. My requirement is when scroll to section it need to pin and then swiper needs to be slide, untill end. I'm taking reference from below codepen. Js version: "https://codepen.io/snorkltv/pen/QWzwmjJ" Im trying to replicate the codepen example in reactjs, I have tried, but Im strucked in rendering issue. Here I have add the code on Stackbitz Reactjs: https://stackblitz.com/edit/vitejs-vite-rpn1iq?file=src%2FApp.jsx Can some please help me with that....

Hello everyone, I want to make some animations just like here: https://gsap.com/community/forums/topic/32504-loop-through-an-array-of-text-and-display-on-screen/?do=findComment&comment=175412&_rid=151858 but using Svg components. I basicaly want to switch between svg components instead of texts. My current work is here: https://stackblitz.com/edit/stackblitz-starters-egrwn8?file=components%2FLogo%2Findex.tsx Any help really appreciated!

Hello I want to know if I can divide the screen size on 100 circle with different size please like this website bubbles also I try to use @nivo/circle-packing to get the radius after packing them but I cannot so how to get it please

Hello, I have a couple of questions and one dead end that I can't seem to solve. I am attempting to create an ellipse carousel, essentially similar to this one made in a circle: https://codepen.io/GreenSock/pen/GRMqWvW My main issue lies in the fact that I'm attempting to move objects along the path using the progress parameter, and I don't know how to achieve this functionality. I have tried to add animation to the timeline, but currently, it isn't moving even with the basic rotation for the div, which acts as a wrapper. I've added numerous console.log statements to track progress changes, and they seem to be updating correctly. The relevant code for inspection is from line 65 to 177, with some comments interspersed. From the side problems I'm also struggling to track the active element using animation added to the timeline, similar to the example provided by GSAP example pin (lines 83-97, currently commented out). Currently, I am changing this value within the 'moveWheel' function at line 162. Here's StackBlitz link for the above questions: https://stackblitz.com/edit/stackblitz-starters-4p7twq?file=src%2Fcomponents%2FroundComponent.js Another issue I need assistance with is the 'convertToPath' function. I am attempting to obtain a path from an ellipse, but when I position the SVG beforehand (for example, by centering it using cx and cy values), obtaining the path doesn't reflect this position. Additionally, if I try to directly add a translate into the generated path, it doesn't work. How can I accomplish this correctly? I have provided separate code to visualize this problem: https://stackblitz.com/edit/stackblitz-starters-6mzrk4?file=src%2FApp.js P.S. Regarding the issue with converting the ellipse to a path, I've noticed that if I comment out line 57 within my code, it looks as it should, but now the entire path isn't visible ?. I've saved the StackBlitz project with a comment on that line. Perhaps you could provide me as I think with some simple solution to get a whole path of svg visible? Thanks in advance.

Hello, I hope everyone is well! I'm trying to make an animation where the element goes to position y=95 then waits 3 seconds and returns to position 0 and repeats the animation several times, but I'm not succeeding. I would like guidance to understand what I am doing wrong. Thank you very much in advance. https://codepen.io/daniel-silva-dxp/pen/VwNaZWg

I'm facing a problem with animate html inside foreignObject. when I click the button it animates. it works normally on desktop and Android devices and is debug responsive with iPhone on the Chrome dev tool. but when I'm testing in a real iPhone. it causing problems. the text and jumping big above the SVG and this is not i want. how can i fix it ? Please help me. this is the demo in codesandbox: animate html ìn foreignObject - CodeSandbox

Hi, Receiving this "Module not found" error while importing DrawSVGPlugin module. the base gsap is working fine, just the drawSVGPlugin is throwing this error. import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin'; export const PathAnimation = () => { gsap.registerPlugin(DrawSVGPlugin); } I am using NextJS 14.1.0. I tried importing the plugin from "/dist" "/all", but the issue persists. Thanks in advance for help.

Hi, and Thanks in Advance; I need to create two sections. The parent div will be pinned, and you can scroll a Lottie animation on the left and text on the right together and snap the Lottie animation to specific keyframes. For example, I have a Lottie animation where it shows a bulb, then transforms into a notebook and then into a tablet. Simultaneously, on the right side section, I have a div with text in it. so when the animation is at bulb I want to show text bulb {initaily},then I scroll and if the animation is at the notebook I want to show notebook in the div text area. And if the animation is in between, snap to the nearest keyframe of a bulb or notebook and so on. and when the Lottie animation ends then unpin parent section. You can see the example if the website: https://www.brandnewschool.com/ if you scroll down. I am really stuck here.

I was building a website while integrating scrollTrigger with lenis, the animation was not coming in right, when I added marker and set it to true to see the the start and end positions, I saw they where not aligned properly. But If I let's say change one of the animating properties in the code it aligns itself correctly to the actual start and end position. And also no this is not the same issue with ScrollTrigger and Lenis Issue, because some section seem not to have this issue and this particular one does. here is the code on codesanbox. Check the contact component. THANK YOU

ScrollTrigger not animating the element ".profile__container", unless I add scrub. I want the scrollTrigger to element without the scrub. Is there something I'm doing wrong. useEffect(()=>{ const profileAboutTexts = document.querySelectorAll(".profile__about p"); // const profileContainer = document.querySelector(".profile__container") // const about = aboutRef.current profileAboutTexts.forEach(text=>{ new SplitType(text, { types: 'lines, char' }) }) const anim = { y: 130, transform: "rotateZ(25deg)", opacity: 0, stagger: { amount: .8 }, } const ctx = gsap.context(()=>{ tl.current = gsap.timeline(); tl.current.from(".profile__about p:first-child .char", {delay: 2, duration: 1.3, ...anim}) tl.current.from(".profile__about p:last-child .char", {...anim, scrollTrigger: { trigger: ".profile__container", start: "top 40%", end: "top 20%", markers: true, } } ) }, aboutRef) return ()=> { ctx.revert() } }, [])

Hey Greensock! I was just wondering if I could get some assistance on my project. I want to create animation letter that appear one by one when scrolling, right now this is my progress https://stackblitz.com/edit/react-xogadh?file=src%2FApp.js I kinda hope when user scroll to the second section they have to scroll one by one/slowly to make the all letters appears. I've tried using pin and adding values "end" more but it makes section after them got pushed down and it some breakpoints it make the animation section got scrolled too. is this the right way to achieve it? Thank you for any help. Sorry for my english

Hi there! We just completed a major site redesign featuring ScrollTrigger in several modules. It's been awesome, thanks to all involved in making this happen! One issue that came up is illustrated in the Codepen. We have a few modules that "expand" with interaction, like the green Module 2. The horizontal scroll module works great, but if the module above is expanded, it throws off the start/end positions of the trigger. My initial solution was to add a resizeObserver on the height of the body, that would trigger a window.resize event. This was effective in conjunction with MatchMedia, but it's global and is interrupting other animations that are happening on-screen while the body size is changing. What's the best (and more "componentized" ) way to recalculate the trigger when its position changes like that? Note: I don't think it's necessarily relevant, but we are using React in a sort of unique set up... we are working within a modular CMS, so each module is its own React app, similar to how the Codepen is set up. Much thanks!

I'm new to GreenSock and I encountered a rather confusing error when using scroll triggers with reactjs. Same JSX code but I get two different results on Codeandbox and on vscode, I'm not sure if this is a bug on my dev environment so here is the video I recorded the error: https://streamable.com/m0kvca here is my code on Codeandbox, everything is very similar and there is no difference but the result is different: :Codeandbox link here is my code in app.js file import React, { useEffect, useState, useRef } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); function App() { const menuRef = useRef(null); const leftRef = useRef(null); useEffect(() => { (async () => { const LocomotiveScroll = (await import("locomotive-scroll")).default; const locomotiveScroll = new LocomotiveScroll(); })(); }, []); useEffect(() => { const menuElement = menuRef.current; const leftElement = leftRef.current; if (menuElement && leftElement) { ScrollTrigger.create({ trigger: menuElement, start: "top top", end: "bottom bottom", pin: leftElement, markers: true, }); ScrollTrigger.refresh(); } }, []); return ( <div> <div style={{ height: "50vh" }}></div> <div> <div ref={menuRef} style={{ display: "flex", border: "2px", borderStyle: "solid", gap: "20px", }} > <div ref={leftRef} style={{ width: "30%", height: "50vh", backgroundColor: "#ff0" }} > <div style={{ padding: "20px" }}>1</div> <div style={{ padding: "20px" }}>2</div> <div style={{ padding: "20px" }}>3</div> <div style={{ padding: "20px" }}>4</div> <div style={{ padding: "20px" }}>5</div> </div> <div style={{ width: "70%" }}> <div style={{ height: "50vh", background: "#ddd" }}></div> <div style={{ height: "50vh", background: "#ff0" }}></div> <div style={{ height: "50vh", background: "#0ff" }}></div> <div style={{ height: "50vh", background: "#0f0" }}></div> <div style={{ height: "50vh", background: "#333" }}></div> </div> </div> </div> <div style={{ height: "50vh", background: "#333" }}>1</div> <div style={{ height: "50vh", background: "#555" }}>2</div> <div style={{ height: "50vh", background: "#777" }}>3</div> <div style={{ height: "50vh", background: "#999" }}>4</div> </div> ); } export default App; làm ơn giúp tôi

Hi team In the attached code-pen link, div with class 'container' has a div with class 'wrapper' (bad name for a slider) with 6 sections (section tags). I've defined a GSAP timeline and stored it in a variable. I am referencing this timeline using useRef to use it. This timeline has a tween on sections and it animates them on the Xpercent All of this is scroll based using a Scroll-trigger with a scrub. The timeline is set to paused The things that I don't understand are 1. why is the progress of timeline always equal to 0? Is it because scrub is true? 2. How do I control timeline, like start, pause, reset, reverse, if the tweens are scroll based? 3. How do I control timeline in react? 4. What is the optimal way of updating react components that are based on a timeline's/tween's progress (eg. the progress bar) Currently, i am updating the progress bar based on the progress of scroll trigger, when I add a state variable and use it as a dependency in the useEffect and try to update it to comply with react, it doesn't work. What is the underlying issue? NOTE: I am animating the xPercent because I was further animating the scale of sections based on their position with respect to the viewport using container animations but that is too far fetched. Please help me understand

Hi, I have some trouble with my Observer. I used it to snap between 2 sections. I have a state for the open menu is isOpenedMenu and pass it to the navbar as props. But when I click many times it causes an error with the Observer. I'm going crazy over this because when stated in the navbar component it works normally. What's wrong with the Observer? Here is my codesanbox: Maximum call stack size exceeded by observer - CodeSandbox Please support me, Thank you so much

Hi everyone, I have some trouble with my project. I'm trying to mix Observer and Scrolltrigger. I have a body with overflow: hidden to disable the native scroll of HTML. I am using a manual scroll with a Scrolltrigger. But I'm facing a problem when it becomes the manual scroll. It doesn't run onEnter and onEnterBack then using Observer to snap back. How can I make onEnter and onEnterBack run while keeping overflow: hidden in the body and the manual scroll?

Hello, I have a question about how to replicate the hover effect in boxes like this site (https://www.vovi.studio/). My question is how to have the box background changed to black but in a smooth way like the example website and split the text. I managed to do something with the code below, but it wasn't as smooth as on the example site. // react box component import { useRef } from 'react'; import gsap from 'gsap'; import { ArrowCircleRight } from 'phosphor-react'; import { Flex, SplitElement } from '@/components'; import * as S from './styles'; import { DefaultTheme } from '@/styles'; interface IGridBoxProps { alignWrapper?: 'center' | 'flex-end'; justifyChildren?: 'center' | 'space-between'; } const GridBox = ({ alignWrapper = 'center', justifyChildren = 'space-between' }: IGridBoxProps) => { const splitElementRef = useRef<HTMLDivElement>(null); const gridBoxRef = useRef<HTMLDivElement>(null); const tl = gsap.timeline({ defaults: { duration: 0.2, ease: 'power1.inOut' } }); const onEnter = () => { if (splitElementRef.current && gridBoxRef.current) { const splitChildren = gsap.utils.toArray( splitElementRef.current.children ); tl.to(gridBoxRef.current, { background: DefaultTheme.colors.text.heading, duration: 0.3, stagger: -0.05 }); tl.to(splitChildren, { yPercent: -100, stagger: -0.05 }); } }; const onLeave = () => { if (splitElementRef.current && gridBoxRef.current) { const splitChildren = gsap.utils.toArray( splitElementRef.current.children ); tl.to(splitChildren, { yPercent: 0 }); tl.to(gridBoxRef.current, { background: DefaultTheme.colors.white, duration: 0.15 }); } }; return ( <S.GridBoxWrapper align={alignWrapper} ref={gridBoxRef} onMouseEnter={onEnter} onMouseLeave={onLeave} > <Flex align="flex-end" justify={justifyChildren} style={{ width: '100%' }} > <SplitElement firstChild="firstChild" lastChild="lastChild" ref={splitElementRef} /> <ArrowCircleRight size={20} weight="bold" /> </Flex> </S.GridBoxWrapper> ); }; export default GridBox; //styles box component import styled, { css } from 'styled-components'; import { Flex } from '..'; export const GridBoxWrapper = styled(Flex)` ${({ theme }) => css` width: 100%; height: 200px; border: 1px solid ${theme.colors.gray[50]}; padding: 3.2rem; svg { color: ${theme.colors.gray[200]}; } `} `; //react split component import { ForwardRefRenderFunction, HTMLAttributes, ReactNode, forwardRef } from 'react'; import * as S from './styles'; type SlitWrapperDivType = HTMLAttributes<HTMLDivElement>; interface ISplitElementProps extends SlitWrapperDivType { firstChild: ReactNode; lastChild: ReactNode; } const SplitElement: ForwardRefRenderFunction< HTMLDivElement, ISplitElementProps > = ({ firstChild, lastChild, ...props }, ref) => { return ( <S.SplitWrapper {...props} ref={ref}> <S.SplitChildren>{firstChild}</S.SplitChildren> <S.SplitChildren>{lastChild}</S.SplitChildren> </S.SplitWrapper> ); }; export default forwardRef(SplitElement); //styles split component import styled, { css } from 'styled-components'; export const SplitWrapper = styled.div` width: fit-content; height: 2em; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; `; export const SplitChildren = styled.span` ${({ theme }) => css` color: ${theme.colors.gray[200]}; font-size: 2em; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; `} `; Can anyone help me improve this gsap code and make the animation as smooth as possible? Thank you all very much in advance. Gravação de Tela 2023-10-17 às 18.51.17.mov

I want to create a parent div with 80% of screen width, and inside of that there should be mini square colorful divs, now the functionality i want it to drag though them inside of that parent div, and see all the divs because there'll be so much divs so it will be hard to see them in 1 place, and also It should show the divs in a grid style. another website (midjourney) using same features uses this draggable.min.js() gsap.(). how to achieve it? you can go to (https://www.midjourney.com/) and test it, just click on the eye icon and it will appear on the hero section