Search the Community

Hello Guys, Hope you are doing good, i need some help with timeline issue. iam creating a image slider where iam getting issue regarding starting next time line when current timeline is 50% completed. Eg. when slide first is 50% completed then second slide should be started and so on as slider will be worked infinite Thanks a lot for your help !

I want to create animation stack like this section (photo attachment) of the site https://vendredi-society.com/. Does anyone have sample code or something similar? that would help me a lot. Thank you

Hello GSAP community ? I had a problem with the animation being quite light I think xD. But I spent hours and couldn't implement it. I am attaching my codepen so you can see my code: https://codepen.io/ProjectDCL/pen/wvbyXQW I'm creating an animation for a modal window to appear to select the language version of the site. My animation works correctly when opening and closing the very first time, but as soon as I try to open/close my modal window again the animation breaks. I think it has to do with this line of code langContainer = $(this).siblings('.lang-container') I use it because on my site there are several places with a language switch and I don't want them all to open at once. I also need that when a modal window is open, if the user clicks anywhere on the site except the modal window itself, then it closes. Perhaps you have ideas on how this can be done? I tried to simply add a reverse timeline when clicking on a $document, but with this approach it will also capture the modal window. Write if you need more information. I will be incredibly grateful for your help!

I'm trying to implement a GSAP timeline with Locomotive Scroll beta to pin an element while scrolling in a Next.js component. The code works perfectly in a normal HTML and JS environment, but it's not functioning as expected in Next.js. Here is the minimal demo with normal html environment: https://codesandbox.io/p/sandbox/gsap-timeline-forked-3dqjgv?file=%2Fsrc%2Findex.js%3A8%2C18 Here is the Next Js version: https://codesandbox.io/p/devbox/c4cq6q?file=%2Fpin-element%2Fsrc%2Fapp%2FPinComponent.js%3A28%2C11 I'm new to GSAP and I'm looking for assistance to fix the issue.

Greetings! I can't figure out how to implement a random repeatDelay on this simple animation: gsap.timeline({ repeat: -1, repeatDelay: 'random(1, 5)', }) .to('.dot', { ease: 'none', duration: 1, y: '100vh', onComplete() { gsap.set('.dot', { x: 'random(100, 1000)', ease: 'none', }) } }); As you can see, in this simple version of the animation, it's just a dot that starts from random x points at the top and simply falls to the bottom and repeats infinitely. It works fine. But I need the repeatDelay to be random and I thought I could use random for the repeatDelay but I'm obviously doing some wrong...

Hello again there, I have Issue about matching the timeline from two different loops. My goal is I want to make the item move a bit whenever the shockwave hit. Currently, I'm match those two manually using a delay. In my real case, there are more items will be showed up, each of the items have their own direction. So, matching it one by one will take much time and sometimes it didn't match with the shockwave. Is there any best practice that I can use? Here's the demo to help you understands my explanation.

Hello, I will be much appreciate if someone can help me with this! Since I am not a programmer I have used some help and basic knowledge to achieve the following scrolling effect. https://codepen.io/M-Milde-the-scripter/pen/pomNZeV Basically it start with a image sequence animation, followed by second animation presenting a text with half opacity words, which becomes visible while the user scroll down, and once all the words becomes visible the entire text continue to scroll to reveal the next content. As you can see I am adding some classes on the html element while the user scroll down: - on the header I add .header-active and on the body I add .bg-1 when the first animation ends - and again on the body I add .bg-2 when the second animation ends What I want to achieve is simply to remove those classes in the same order, once the user start to scroll up: - remove the class .bg-2 from the body once the second animation reveals from the t and start to play backwards - remove the class .header-active from the header and .bg-1 from the body, once the firs animation is showing from the top and star to go backwards while the user scrolling up. So the final effect will be when the user scroll back to top the background is again white and the navigation is not visible. on the top example I try with "onReverseComplete", but no success Thank you in advance!

I can't use play in timeline, but if not using timeline like gsap.to directly without paused, it can work but I want to pause first then play when I click button, please help me guys?

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.