Search the Community

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

Hello everyone, I have a React app with a number animation that activates when we scroll down. The animation works fine with regular scrolling. However, when I click an Anchor tag <a href="#section"> to jump-scroll to a section below, the animation doesn't play. Even after scrolling up and down again, the animation still doesn't work. I need some guidance on how to fix this issue. Link to sandbox: https://codesandbox.io/s/gsap-animation-issue-k3g7yl?file=/src/App.js Note: also, can someone tell me how to embed codesandbox in my form?

Hi everyone, I am new in here. My employer wants me to create a page which has an animated background exactly like the grid in this web, whose grid is moving like waves. They want to use different grid image but with the same effect. When I check the website, they use GSAP, hence why I am here. I have been reading the documentations, and so far haven't found any method to create such animation. If anyone can help me, that would be highly appreciated.

Hello fellow GSAP enthusiasts, I hope this post finds you all in good health and high spirits. I'm currently working on a project where I need to create a section animation using GSAP and Next.js. Despite my efforts, I haven't been able to find a suitable solution. I'm reaching out to this community in the hopes that someone can provide some guidance or point me in the right direction. To give you a clear idea of what I'm aiming to achieve, I would like to replicate the section animation showcased in this example: link to example. You can find the animation below the "About me" section on that webpage. Essentially, as the user scrolls, the image and content within the section slide vertically in a visually pleasing manner. While I initially attempted to create this animation using GSAP and Next.js, I have struggled to find the perfect implementation. I'm open to using alternative frameworks or libraries if they better suit this animation requirement. If anyone has successfully implemented a section animation like the one mentioned above, I would greatly appreciate any tips, code examples, or even a walkthrough of the steps involved. Thank you in advance for your time and assistance. I'm looking forward to your valuable input!

I am trying to create two subsequent animations on the cube in react-three-fiber. But I want to run the second animation(animateY) after I finish the first animation(animate) and that's why I am using onComplete function for the same. But I am getting the desired results as both animations run simultaneously. I have shared the relevant code and output for the issue. _med.mp4

On clicking the link scrollTrigger in the below error demo and scrolling the section is not being pinned but on manually refreshing the page the it is getting pinned and works fine, on removing any transition animations the pin works as well still works. Here's a link to the same error that I replicated. https://stackblitz.com/edit/nextjs-rdx4ro?file=pages%2Fscroll.js P.S I am a gsap noob and im still learning

Hello Team, Following code pen has click event anywhere on page, 1. Could you please assist me in transforming jquery to equivalent result using gsap. 2. Also please suggest how to achieve same result if by clicking any 5 menu items that animates radial clip path entire page by originating from any one menu item. ( Example: Clicking any navigation item from website: https://www.choreograph.com/ ) Regards Prad.

Hello everyone, I need your help to code this scroll logic : change one pinning element allowed active state by scroll. When I scroll, state changes and updates image in both sides allowed. By details, when I scroll down, the element below will be active and drag to change the corresponding image to the right, otherwise when scrolling up, the upper element will be active and drag to change the image, when clicked on any element on the left, the image will also be changed according to the active element (similar to scroll), and if the first element is active, we will be able to scroll to the top of this section. This is sample link : Ngân hàng di động MyVIB 2.0| VIB I want to use scrollmagic or maybe gsap or intersection observer, thank you.

Hello, I just can’t figure out how to set up a smooth sliding of the title (targetTitle) and colored blocks (targetImg, targetImg2). When scrolling through the page, they move very quickly. I've experimented with the duration parameter, but it doesn't give any results. I tried to add ScrollSmoother, the page began to scroll smoothly, but this did not affect the block (target). I don't understand what I'm doing wrong. And for some reason, the marker end: 'bottom bottom' does not reach the bottom of the block (target). Can someone explain why this is happening and how to add smoothness to the elements?

const removeFromQueue = (pos, track) => { const refList = itemsRef.current; const delRefEl = refList[pos]; const otherRefItems = refList.slice(pos + 1); const updateList = Array.from(tracks); updateList.splice(pos, 1); gsap.to(delRefEl, { duration: 0.5, opacity: 0, onComplete: tweenFinished, onCompleteParams: [otherRefItems, pos], }); function tweenFinished(otherItems, rIdx) { console.log({ otherItems, rIdx }); const tl = gsap.timeline({ onComplete: onAnimationComplete, onCompleteParams: [rIdx], }); otherItems.forEach((item) => { const tween = gsap.to(item, { y: "-70", clear: "y", }); tl.add(tween, 0); }); } function onAnimationComplete() { dispatch({ type: PLAYING_LIST_ACTIVE_TRACKS, payload: updateList, }); } };

Basically i started a timeline tween, at that time i dont have the dom element mounted in the webpage is there any way to select dom element and animate in on the fly

Hi GSAP Forum, I've been looking at GSAP for a while now and I cannot find a general solution to a problem i've been trying to address for some time now. My site needs to comprise of 8 sections, that use the native vertical scroll in the browser. Each of the section has a timeline associated to it, in which, the previous section transitions into the next section. The second requirement is that each timeline can vary in length e.g: section 1 takes 10 seconds to transition into section 2 section 2 takes 8 seconds to transition into section 3 The main caveat is that the user is restricted to only scroll once i.e. one mousewheel move, one keypress down or one drag on the scroll bar, in which they will have to wait until the animation/timeline completes for them to be able to scroll again. Can anyone offer a solution or a pointer to a solution? I'm currently using react and gsap Many Thanks, Chris

Hello, I am using GSAP and next to build my Portfolio website. I have previously worked with same setup and every thing was working. However, now in my project when I tried to use gsap.from method to fade in reveal headings from below, it is not working. Heres the code snippet import React, { useLayoutEffect, useRef } from 'react' import Style from '@/styles/moudle/hero.module.scss' import { gsap } from 'gsap' const Hero = () => { let line = useRef(null) useLayoutEffect(() => { const tl = gsap.timeline() const ctx = gsap.context(() => { // tl.from(line, { // duration: 0.7, // skewY: 4, // y: 69, // autoAlpha: 0, // }).from('p', { // y: 50, // duration: 0.5, // autoAlpha: 0, // skewY: 4, // }) gsap.fromTo(line, { y: 50, autoAlpha: 0, }, { y: 0, autoAlpha: 1, }) }) return () => ctx.revert() }, []) return ( <> <section className={`${Style.wrapper}`}> <div className='container'> <div className={Style.hero_text}> <h1> <span ref={(el: any) => (line = el)}>I make cool frontend</span> </h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic provident reiciendis voluptatem eius eveniet itaque?</p> </div> </div> </section> </> ) } export default Hero Here, I am using typescript. I read a post in this community to use useLayoutEffect instead of useEffect so, I am using useLayoutEffect. I tried to use .from and .fromTo for the animation but both doesn't worked. Opacity and autoAlpha is working but not x and y value. Other dependency that I am using is Lenis for smooth scroll. I thought this might be the cause and tried in code sandbox with same setup but here it is working properly. https://codesandbox.io/embed/peaceful-ritchie-xtkrl4?fontsize=14&hidenavigation=1&theme=dark

Hi, To learn gsap, I copied by hand an existing code from an online tutorial. The behavior seems different on live update and page load. On page load, the last animation is triggered a second time after the others. Do you know why ? It must be very easy but I am totally new to gsap. My code copied by hand is here: https://codesandbox.io/s/learn-gsap-create-react-app-forked-3kc74k?file=/src/App.js and the original is here : https://github.com/wrongakram/GSAP-imageReveal/blob/master/src/App.js I copied/pasted the original code in my project in the 'codeOriginalGitHub.js' file Thanks

I'm a beginner at GSAP. I have a complex SVG which runs perfectly in HTML. I'm trying to convert it into React by using GSAP. How can I convert the HTML SVG in react? Here's the link to HTML SVG: https://codesandbox.io/s/demo-svg-html-esf3dc?file=/index.html While you put hover over the circle it is animated. Here's the Link to my React App: https://codesandbox.io/s/framer-motion-svg----3333-zcvdk1?file=/src/components/MainSVG.js I try to put all curves parents' id in the motion path. I got an error. Now as you can see I just put only 1 path id in the motion path and all works like a mess. Here's a JS function but I don't know where and how to add that in react. Maybe if I add that to my code it will work. const existElementId = (e) => { return document.getElementById(e) } existElementId("circle" + 1) for (let i = 1; null != existElementId("circle" + i); i++) { console.log(existElementId("circle" + i)) let tl = gsap.timeline({ repeat: -1 }); tl.to("#dot" + i, { duration: document.querySelectorAll("#curve" + i + " path")[0].getTotalLength() / 200, ease: "none", motionPath: { path: "#curve" + i + " path", align: "#curve" + i + " path", alignOrigin: [0.5, 0.5], } }); tl.pause() existElementId("circle" + i).onmouseover = () => { tl.play() } existElementId("circle" + i).onmouseleave = () => { tl.pause().time(0) } } I'm expecting to get any solution/idea to make it like the index.html file.

Hello, I am trying to create an animation where the overlapping pinned sections will do a fade in and out transition with full scroll. I've been searching all over the forums and tried myself but unfortunately not being able to create what I want. Here is a minimal demo: https://codesandbox.io/s/elated-nova-bt0fl4?file=/src/App.js By "full scroll", I mean waiting for the transition to complete even if the user forces the scroll to an in-between spot. Similar to how FullPage.js works but with fade transition instead of sliding. In the minimal demo, the transition happens too quickly. However, I also want to achieve a more delayed and smooth transition that is pleasing to the eye, just like every other cool animations created using GSAP! Looking forward to some help from the community. Some of the threads from the forums that I have already tried taking help from which are close to what I am trying to achieve are: I have also attached a screen recording of what I've come up with till now

Hi! I was trying to achieve a similar effect to this codepen (found it in the gsap showcase) , but without all the complications of the loop. Most precisely, I was trying to achieve that instant snap effect, but without restarting when the array ends. Something exactly like this. I spent several hours yesterday without catching it, I would really apprec.iate any start point to work arround. Thanks in advance

Hey everyone, I really new to gsap. Im currently working on a pretty big project in ReactJS with ScrollMagic. Im trying to use gsap for the Text portions of the Animations... and I cant figure out whats wrong. Im trying to do a simple Fade in - Fade out animation on scroll triggers. The current state of the project is hoster on Here and below are the JS and CSS Files related to this.. if someone who knows a bit more than me can help me out.. it would be great JS import { React} from 'react' import { motion, useAnimation } from "framer-motion"; import { useInView } from "react-intersection-observer"; import { useEffect } from "react"; import { Controller, Scene } from "react-scrollmagic"; import Sequence from "./Sequence"; import { gsap, ScrollTrigger } from "gsap/all"; import { useRef } from 'react'; gsap.registerPlugin(ScrollTrigger); export default function Scrollmagic() { const control = useAnimation() const [ref, inView] = useInView() const boxVariant = { visible: { opacity: 1, scale: 1 }, hidden: { opacity: 0, scale: 0 }, } useEffect(() => { if (inView) { control.start("visible"); } }, [control, inView]); const root = useRef(); const q = gsap.utils.selector(root); useEffect(() => { gsap.to(q(".b"), { x: 400, scrollTrigger: { trigger: q(".b"), start: "45% 60%", end: "+=4300", duration: 1.5, delay: 1, opacity: 0, stagger: 0.02, y: 30, ease:"power1.out", markers: true, id: "scrub" /* gsap.to(q(".b"), { x: 400, rotation: 360, scrollTrigger: { trigger: q(".b"), start: "top center", end: "top 100px", scrub: true, markers: true, id: "scrub"*/ } })}); return ( <div className="wrapper"> <div id="root"></div> <Controller> <Scene duration="200%" triggerHook="0" pin> {progress => ( <div ref={root} style={{ width: "100%", height: "100vh", position: "relative" }}> <div class="box b">Test Text </div> <Sequence ref={ref} progress={progress} /> </div> )} </Scene> </Controller> </div> ) } CSS .stickyblock{ position:absolute; bottom:50%; left:12.5%; right:12.5%; margin-top: 50%; color:#fff; font-family: "Montserrat"; font-weight: bold; font-size: 50px; z-index: 30000; } .box { height: 100px; position: absolute; left: 100px; font-size: 50px; color:#fff; font-family: "Montserrat"; font-weight: bold; font-size: 50px; z-index: 30000; } .b { top: 400px; }

Hello, Can you tell me if it is the best way to play the animation with Scrolltriger, gsap and react. Is there another way to acheive this ? I have attached a codepen demo. Thanks in advanced

Can anybody guide me regarding how to use `gsap.fromTo( )` in react alongwith scrollTigger? I have following code: useEffect(() => { gsap.fromTo( imgwidCard.current, { scrollTrigger: { trigger: imgwidCard.current, scrub: 0.5, markers: true, start: "top 85%", }, }, {opacity: 0}, {opacity: 1} ) }) This is not working, it is giving `opacity:0` to the element but is not changing opacity from 0 to 1. Any help would be appreciated. Thank you

This is my first using GSAP, and I'm stuck in errors. I tried to import `MorphSVGPlugin` in `Next.js` app and `React.js` app and it is not importing it. I am writing the exact code given in GreenSock | Docs | Installation, but it is giving Could not find module in path: `'gsap/MorphSVGPlugin' relative to '/src/App.js'` error in `React.js`, and `Module not found: Can't resolve 'gsap/dist/MorphSVGPlugin'` error in `Next.js` CodeSandbox URL: xenodochial-haze-nxelbo - CodeSandbox

Hiya, I tried searching around but couldn't find anything, so forgive me if this is a repeat question. I have a fixed nav bar at the top of my site that I want to animate in on the initial page load (I think I have this part under control). When the user scrolls I want parts of it to animate out and disappear once they've moved downwards 50% of the total screen height. It's not wrapped in a 100vh container because obviously it's a nav, and all of the first sections have different heights so I can't base it off of that. What's the best approach for this? Create a dummy element with a super negative z-index? I thought the answer was `document.body`, but then I realized that makes no sense because the body is super long. I'm using reactjs. No jQuery in this household =] Thanks

Hi. I use GSAP v3 with NextJS. I found that a gsap.to(duration, {"clip-path": polygon(...)} doesn't work well with ReactJS, which works on pure html/javascript/css environment (A working demo in pure html/javascript/css can be found in an answer by OSUblake in my previous question[1]. It has also other movements.) In my attached demo, the top left corner moves from the left to right. However, :before element should expand from the top to the bottom. i.e. the bottom line should move from the top to the bottom. Is this a bug or I'm using GSAP and React wrongly? I attached reproducible codepen in ReactJS. Thank you in advance and sorry for continuous submissions. [1] I found related three articles that can help understanding using ReactJS and GSAP together. https://greensock.com/docs/v3/GSAP/UtilityMethods/selector()

I want to reuse an hamburger menu I had from a previous react app in my new Nextjs app. There is a siple animation on a list of links. On the previous app, the link where with React-router-dom and it was ok. Since I now use next/link, it doesn't work anymore. Any reason for that? const handleHover = (e) => { gsap.to(e.target, { duration: 0.3, y: 3, skewX: 4, ease: 'power3.inOut' }); }; const handleHoverExit = (e) => { gsap.to(e.target, { duration: 0.3, y: -3, skewX: 0, ease: 'power3.inOut' }); } <nav> <ul> <li><Link onMouseEnter={handleHover} onMouseOut={handleHoverExit} ref={el => (boxRefs.current = el)} href="/nouveautes">Nouveautés</Link></li> <li><Link onMouseEnter={handleHover} onMouseOut={handleHoverExit} ref={el => (boxRefs.current = el)} href="/catalogue"> Catalogue</Link></li> <li><Link onMouseEnter={handleHover} onMouseOut={handleHoverExit} ref={el => (boxRefs.current = el)} href="https://shop.paradisepapers.fr/"> Diffusion</Link></li> <li><Link onMouseEnter={handleHover} onMouseOut={handleHoverExit} ref={el => (boxRefs.current = el)} href="/contacts"> Contacts</Link></li> <li><Link onMouseEnter={handleHover} onMouseOut={handleHoverExit} ref={el => (boxRefs.current = el)} href="https://cmeditions.us17.list-manage.com/subscribe/post?u=385cdf2c81c2f3bdd2ff1583e&amp;id=fa0ff0c34e"> Newsletter</Link></li> </ul> </nav>

Hi! I am using ScrollTrigger in React and I am experiencing the following problem: When I update any React State and I use scrub:1(or any number), the animation is reset and it is possible to see it jumping. This doesn't happen when scrubis set to true I've tried different methods available in the guides and read many forum topics but I haven't had success. I wonder if this is possible keep the position when there is a re-render? I'd appreciate any help Thanks in advance