Search the Community

Hello, I'm creating a scroll animation with snapping. Is it possible to set the snap duration based on the remaining animation duration on the timeline? Between Step1 and Step2 I want the snap duration to be max 10; between Step2 and Step3 I want the snap duration to be max 3; between Step3 and end I want the snap duration to be max 6. Is that possible? In my test above, the duration is always round about 2000ms. Thanks Oliver

Hi ! Hope you're all doing well, I have a question but not much time to provide a minimal demo, so let me explain my question easily : Let say I have a circle, and I want this circle, when an event fire, to change size, from 0px to 25px, or in reverse from 25px to 0, and when another event fire, from 25px to 100px, and also in reverse from 100px to 25px. I can just create for example two timelines, with a .fromTo(), pass my start and finish values, and use it with the play() and reverse() methods, which works well. But what if I want my circle to change from 25px to 100px ? My first idea was to control the progress(), just by tweening it from let's say : 0.25 to 1. But there is no such thing done smooth (the progress() methods is just a setter). How can I do it with elegance, without creating a third timeline ? Have a nice day ! Thanks !

I'm facing a problem with this animation, when I click the add button, it will animate like in the video, but when i click that button again while the previous animation is playing, there will be two animation playing at them same time, that is why when those dots move up to the add button and then later the timelineOpen still playing so it still update the y position making it stay at the same location. I can prenvent it like implement disabled button when timeline is active, but I don’t want it, I want when user click that button whenever they want and the animation if there is one playing it will stop at its position and start another timeline. import { addButton } from "../utils"; import { useDispatch, useSelector } from "react-redux"; import { addButtonClick } from "../redux/action"; import { buttonSelector } from "../redux/selectors"; import { useGSAP } from "@gsap/react"; import gsap from "gsap"; import { useState } from "react"; function Nav() { const dispatch = useDispatch(); const status = useSelector(buttonSelector); const [animationActive, setAnimationActive] = useState(false); const timelineOpen = gsap.timeline({ paused: true, }); const timelineClose = gsap.timeline({ paused: true, }); useGSAP(()=>{ timelineOpen.to("#addButton",{ scale: 0.85, y: -12, rotate: 316, ease: "power1.inOut", duration: 0.3, }) timelineOpen.to("#addButton",{ y: 0, scale: 1, duration: 0.3, }) timelineOpen.to(".First",{ y: 0, scale: 1.3, duration: 0.1, },'-=0.4') timelineOpen.to(".First",{ y: 80, scale: 1, duration: 3.2, ease: "elastic.out(1,0.7)", }, '-=0.3') timelineOpen.fromTo(".Second",{ y: 80, // scaleY: 0, // duration: 1, },{ y: 140, scaleY: 1, duration: 3.2, opacity: 1, ease: "elastic.out(1,0.7)", }, "-=2.7") timelineOpen.fromTo(".Third",{ y: 140, // scaleY: 0, // duration: 1, },{ y: 200, scaleY: 1, duration: 3.2, opacity: 1, ease: "elastic.out(1,0.7)", }, "-=2.9") timelineOpen.fromTo(".Fourth",{ y: 200, // scaleY: 0, // duration: 1, },{ y: 260, scaleY: 1, duration: 3.2, opacity: 1, ease: "elastic.out(1,0.7)", }, "-=2.9") timelineOpen.fromTo(".Fith",{ y: 260, // scaleY: 0, // duration: 1, },{ y: 320, scaleY: 1, duration: 3.2, opacity: 1, ease: "elastic.out(1,0.7)", onComplete: () => { setAnimationActive(false); } }, "-=2.9") timelineClose.to("#addButton",{ scale: 1, rotate: 0, duration: 0.3, }) timelineClose.to(".selector",{ y: 0, duration: 0.7, stagger: 0.1, }) if(status){ timelineOpen.play(); // setAnimationActive(true); }else { timelineClose.play(); // setAnimationActive(true); } },[status]) console.log(animationActive); const handleAddBtn = () => { dispatch(addButtonClick()); } return ( <section className="nav-grid border-r border-[#ececec] flex items-center flex-col row-span-2"> <div className="h-20 flex items-center"> <h4 className="text-xl font-semibold bg-gradient-to-r from-blue-500 to-fuchsia-600 bg-clip-text text-transparent ">TDNote</h4> </div> <div className="notes-container"> <div className="mt-12"> <button // disabled={animationActive} onClick={handleAddBtn} id="addButton" className="z-20 rounded-full bg-black border-none w-14 h-14 outline-none relative cursor-pointer flex items-center justify-center"> <img src={addButton} alt="add button" className="w-7 h-7"/> </button> </div> <div className="note-selector flex justify-center relative z-10 -mt-6"> <div className="selector First bg-[#ffcf7d] z-10 !opacity-100 "></div> <div className="selector other Second bg-[#f0a177] z-[9] "></div> <div className="selector other Third bg-[#b095f6] z-[8]"></div> <div className="selector other Fourth bg-[#55cffa] z-[7]"></div> <div className="selector other Fith bg-[#e6ee96] z-[6]"></div> </div> </div> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="gooey-effect" xmlns="http://www.w3.org/2000/svg"> <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -9" result="gooey-effect"/> <feComposite in="SourceGraphic" in2="gooey-effect" operator="atop"/> </filter> </defs> </svg> </section> ); } export default Nav; Screen Recording 2024-03-30 at 22.04.51.mov

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

Hello! I'm trying to understand how the position parameter is affected by the "tweenTo" method. From this demo, I tried to make the blue box achieve the same starting point from both forward (0 to 1) and backward (1 to 0) directions (to follow the starting point of the red box), but even after using the "<" position parameter, the blue box doesn't start at the same time when returning (1 to 0). If the timeline is going from 1 to 0 — from my understanding —, the blue box should animate along with the second ".to", as I'm using the "<" parameter. Am I missing something? (sorry if my English is bad)

Hello! Giving context: I'm coming from Framer Motion and porting a menu animation to GSAP. I'm using the same ease and duration as I used in Framer Motion, but I get this strange delay when the reversed animation is played (when you click "CLOSE" you can feel a delay before going back to "MENU"), if I would guess, it looks like the ease is reversed too, giving this strange animation. If it is the ease, what can I do to use the same ease but in the right direction? (sorry for my bad English)

Hello developer, hope you all are doing well. I want my svg to start from the center of the screen, keep animating at the center of the screen and end its animation at the center of the screen. for now, I am using an SVG and keep its height 0 and then it animates to its full height. I am using it for my timeline project but the line starts normally then moves away from the center and speeds up and leaves the screen to the bottom.

I got an error here: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'totalTime') at Timeline.restart (gsap.min.js:10:20564) at tl.clear (confettiCuisine.js:118:10) at Socket.<anonymous> (confettiCuisine.js:145:16) at Emitter.emit (index.mjs:136:20) at Socket.emitEvent (socket.js:498:20) at Socket.onevent (socket.js:485:18) at Socket.onpacket (socket.js:455:22) at Emitter.emit (index.mjs:136:20) at manager.js:204:18 and this is the code ::: function bel(){ const sound = new Audio('/sound/mixkit-fairy-message-notification-861.wav'); sound.addEventListener('canplaythrough', ()=>{ sound.play(); }) } let tl = gsap.timeline( {paused: true, repeat:2}); tl.play = function(){ tl .to(leftBell, { duration: 0.15, css: { scale: 1.2, skewY: "1deg", skewX: "-1deg" }, ease: Power0.easeNone }) .to(rightBell, { duration: 0.15, css: { scale: 1.2, skewY: "1deg", skewX: "-1deg" }, ease: Power0.easeNone }) .to(bodyBell, { x: 0, transformOrigin: "50% 50%" }) .to(bodyBell, { keyframes: [ { x: -3, rotate: 10}, { x: 1.5, rotate: -10}, { x: -1.5, rotate: 6.0 }, { x: 1.5, rotate: -4.4}, { x: -1.5, rotate: 2.2 } ], duration:0.4, ease: Power0.easeNone }); } tl.clear = function (){ this.kill(); this.restart(); } // const submit = () => { function submit() { form.addEventListener('submit', (e) => { e.preventDefault(); socket.emit('message', { content: chatInput.value, userName: Username.value, id: Id.value }); chatInput.value = ""; return false; }); // what i get from the server socket.on('message', (msg) => { if(window.location.pathname !=="/chat"){ displayMessage(msg); bel(); tl.play(); }else{ displayMessage(msg); tl.clear(); } chat.scrollTop = chat.scrollHeight; }) socket.on('load all messages', (data) => { data.forEach(message => { displayMessage(message); }) chat.scrollTop = chat.scrollHeight; }) }

Trying to basically "walk" a square across the screen the way you'd tip a heavy box across a room to move it. For it to work, I need to update the transform origin (i.e. rotation point) of the box for each step but since the origin is relative to the original box position, it doesn't quite work. Any thoughts on getting this to work? Currently I'm just using a div but I'm open to SVG solution.

Hellow Everyone! Just need a little help. I only want to show the path that the SVG (Rocket )has covered and not the whole path. as the rocket goes up the path is shown. https://codepen.io/Fawad4real/pen/LYaaOZG

I'm trying to fire the first two tweens simultaneously, so the blob and the text should scale away at the same time, but they always fire one after another, how can I fix this?

Hello everyone! I'm having trouble understanding and fully controlling my animations with Scrolltrigger and scrub. What I'm trying to achieve is - i want to have two animation elements (.main-title, var points) fired by scrollTrigger with the same trigger point. However I want to animate .main-title once it's finished i want to fire the next animations which are in forEach() .animate-text with paired .country. I think i achieved that in the codepen (please feel free to correct me or show the better/more efficient way). Now i have two problems/questions: I want to have full control of the duration/amount of scroll of each animation (.main-title, each point etc) for example i want to .main-title to be fast then first point to be slow, the next point fast and the last point very slow. (By point I mean each elem in forEach()) Also i have a bug on .main-title that sometimes it does jump up/down - no idea how to tackle this. Every input/tip/better approach to the whole functionality will be much appreciated, thank you guys in advance!

Tweenings Greetings, I've shared a demo that works okay in codepen, but has many syncing issues in prod (react). I'd like to know if there is a better way to do what I'm doing here. I'm also curious to find some docs on helping gsap get initialized before rendering. Seem to have the odd refresh where my text treatment is all messed up. After initial text and video wipe this should happen: With the frame cuts of the video the span in "The next number is" {1} should update. With the frame cuts the bg gradient should also update. On repeat is should stay in sync with the video. Thanks for any help. First time forum asker.

Hi! how is it going? Context Recently I've been working on a proyect on which I have to implement FLIP, Timeline and ScrollTrigger... Basically the animation goes this way, a little bit of context: At first I have a laptop SVG covering the entire screen, when the user scrolls, the SVG goes from the full screen to a child container on it, while the user is scrolling the animation is running ( for this I'm using the scrub property in ScrollTrigger), when the SVG is positioned where it has to be at the end, a SVG phone appears and goes next to the laptop. (In the Codepen that i've just created doesn't appear the phone, it isn't important at the moment) What's happening? I have 2 problems; When the page loads for the first time the laptop is positioned where it has to be covering the full screen, the first problem occurs when I scroll just after the end of the scroll, the SVG "Jumps" and when I scroll back the SVG is not positioned to the top of the page as it was before (please open the codepen in fullscreen so you can see the bug better). The other problem is that I can't make it responsive, when I set the parent to flex-wrap: wrap-reverse; it breaks and the laptop doesn't fit in the container and overflows the viewport

I have a master timeline, which consists of two child timelines. The problem I am facing is that both the timelines are firing exactly at the start, rather than going sequentially. I tried specifying the position of the second timeline using ">", but it just does not work. The second timeline still fires at the start of the entire master timeline. function Home(){ const tl = new TimelineMax({ onComplete: afterHomeTimeline, scrollTrigger:{ trigger: ".home__card--1", start: "top " + $(".home__card--1").offset().top, end: "top -2000", markers: false, scrub: 1, } }); // Below are tweens added to the Home timeline tl.to(".home__card--1", {y: -($(".home__card--1").offset().top - home__header_height - $(".home__card--1").offset().left)}, "0") tl.to(".home__card--2", {y: -($(".home__card--1").offset().top - home__header_height - $(".home__card--1").offset().left)}, "1") tl.to(".home__card--content-1", {"width": $(".home__card--content-1").width() - (($(".home__card--1").offset().left + $(".home__card--1").outerWidth()) - $(".home__card--2").offset().left)}, "1") tl.to(".home__card--3", {y: -($(".home__card--1").offset().top - home__header_height - $(".home__card--1").offset().left)}, "2") tl.to(".home__card--content-2", {"width": $(".home__card--content-2").width() - (($(".home__card--2").offset().left + $(".home__card--2").outerWidth()) - $(".home__card--3").offset().left)}, "2") tl.to(".home__scroll", {opacity: 0}, "3") tl.to(".home__header", {rotate: -90}, "3") tl.to(".home__content", {rotate: 90}, "3") var cardWidth = $(".home__card--1").width() - (($(".home__card--1").offset().left + $(".home__card--1").outerWidth()) - $(".home__card--2").offset().left - $(".home__card--1").offset().left) tl.to(".home__card--1", {width: cardWidth}, "4") tl.to(".home__card--2", {width: cardWidth}, "4") tl.to(".home__card--3", {width: cardWidth}, "4") tl.to(".home__card--1", {y: -$(".home__card--1").position().top - $(".home__card--1").position().top - $(".home__card--2").width(), rotate: -40}, "5") tl.to(".home__card--2", {y: -$(".home__card--2").position().top - $(".home__card--1").position().top - $(".home__card--2").width()}, "5") tl.to(".home__card--3", {y: -$(".home__card--3").position().top - $(".home__card--1").position().top - $(".home__card--2").width(), rotate: 40}, "5") tl.fromTo(".scroll__1", {opacity: 0, color: "#ffffff"}, {opacity: 1, color:"#993F3F", duration: 8}, "6"); return tl; }; function Portfolio(){ const tl = new TimelineMax({ onStart: console.log("Oh cmon it started again") }); tl.to(".scroll__2", {opacity: 1, duration: 8}, ">"); return tl; }; const master = new TimelineMax(); master.add(Home(), 1).add(Portfolio()); console.log(master.getChildren(false,false,true))

Hello, Sorry for asking this but I don't succeed to make it work: var tl = gsap.timeline({repeat: -1, repeatDelay: 0}); tl.to(element, 5, { motionPath: { path: [ // { x: "0vh", y: "0vh" }, { x: "10vw", y: "10vh" }, { x: "-10vw", y: "70vh" }, { x: "0vh", y: "0vw" }, ], // you probably want more points here...or just use an SVG <path>! curviness: 2, // align:"self" // autoRotate: true }, ease: "none", // clearProps: 'all' }); I just want an element to make a curvy triangle movement and go back to its initial start. Working with vh and vw is good I think to adapt to screen size changes. As far as I have understood, coordinates are here in relative position regarding the initial position of the moving element. For the moment, I got a jump at the start of the movement, I saw align and alignOrigin are here to fix this problem potentially but I don't get it at all. What to do ? thanks

Currently, i am using animate tag to change the path value. Same with morphSVG when combining with scroll trigger and pinned container, SVG is so laggy and very hard to scroll. Is it performance issue, please give me some solutions, Thank a lot.

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

Hello, I have this timeline, I can't start the last tween from text3 instead of textone, what am I doing wrong?

The animation plays while I'm on the page for the first time, after I exit and come back - the animation stops playing I tried: timeline put in useRef gsap.context and subsequently revert Manually clear timeline using kill A simple example that also doesn’t work for me: Here is a link to a site where the text with the same problem is https://next-resume-hazel.vercel.app/ Wait for the full animation and intensity approximately, then go back by clicking on the RESUME title and the text will not animate again. (This post was completely translated using google translator, sorry if anything is not clear) import gsap from 'gsap' import { useEffect } from 'react' export function Component() { useEffect(() => { const obj = { n: 0 } // This will only work while I'm on the page for the first time // If I go to /about, or any other page, and go back, // code block below - will stop working and output the object to the console // Although if you look in _gsap the id of the animation is different from the previous one // Also, not only to but also from, timeline and other things stop working // with which you can smoothly change values gsap.to(obj, { n: 1000, duration: 1, onUpdate() { console.log(obj.n) // 0 - 1000 } }) }, []) return <></> }

Hi, when we click on the button it opens a modal. Inside this modal, it's possible to scroll down to read all the content. It has on the left a "scroll indicator" and some bullet points related to text content on the right. I'd like to anim the scroll indicator (increase the height when we scroll down) and add a class to the bullet points when the scroll indicator hits them. I have two issues right now: - about the scroll indicator, scrolltrigger creates a huuuge blank space after my content so the the scroll indicator is biased and I don't know why (is it related to the end parameter) ? - I created another function to toggle class my bullet points, it's "working" but it's not perfect because classes aren't toggle exactly when the scroll indicator meet the bullet point. Is it possible to achieve what I want with only one function/scrolltrigger ? How to fix the end section bug ? Thanks in advance.

Hi GSAP team, I often use GSAP for a long time but just "copy pasting" the codes.... And now, I really want to expert it (going to buy your license in near time!) I have a couple question, actually a lot... Hope you can bear with me 1. Is there any wrong / bad syntax on my approach? Would you "correct" or tell me what's bad/wrong in my GSAP codes. 2. How to make the .draw-line class slower to bottom when I scroll it? I mean the duration. I do research and implement it, but it didn't work (I already take it out) 3. I want to add ".active" on ".timeline-li" when .draw-line start triggering. I already did it, but the "active" class removed automatically when it's outside the trigger area 4. I also want to change the image on the left, when the second .draw-line triggered. (We can talk later once these three are resolved) I'm so sorry if my question is too da*n much, hope any of you can help me out. Thank you, so so much!

Hi there, I'm trying to make an animation with scrolltrigger. I made a timeline but all my tweens are playing at the same time, what am I missing ? I want to play the last 4 tweens ONLY when the ones before are completed, how can I do that ? Do I have to create an other timeline ? Any tips are welcome

Hi all! I was wondering what type I should give 'timeline'. Because I received this error: Binding element 'timeline' implicitly has an 'any' type. I am trying to figure out a stable solution. I provided my source code: 'use client' import { useEffect, useRef } from 'react' import Image from 'next/image' import styles from './ImageGrid.module.scss' import { scaleCenterImage, moveUpTitle, introAnimation } from './animations' const ImageGrid = ({ timeline }) => { const centerImageRef = useRef(null) const leftImagesRef = useRef([]) const rightImagesRef = useRef([]) const centerImageWrapperRef = useRef(null) const centerImageTitleRef = useRef(null) useEffect(() => { introAnimation(centerImageWrapperRef.current) timeline && timeline .add( scaleCenterImage( centerImageWrapperRef.current, centerImageRef.current ), '<' ) .add(moveUpTitle(centerImageTitleRef.current), '<') }, [timeline]) return ( <section className={styles.imageGrid}> <div className={styles.imageGrid__inner}> <div onClick={() => timeline.play()} className={styles.imageGrid__imageWrapper} ref={centerImageWrapperRef} data-wrapper-center > <div className={styles.textReveal}> <h2 className={styles.imageGrid__imageTitle} ref={centerImageTitleRef} > Re:Active </h2> </div> <Image ref={centerImageRef} sizes='(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw' priority fill data-image-center className={styles.imageGrid__image} src='/images/practice_1.jpg' alt='' /> </div> </div> </section> ) } export default ImageGrid

When using firefox the scrollable timeline on https://eattheworldbetter.com/scan/banana-adv/ doesn't work. The (in this case) banana doesn't appear to scroll with the line. See chrome to check how it supposed to work. I don't get any errors in de console. Does anyone know why this does not work?