Search the Community

Hello I want to make vertical text slider. I read old post and try to make something but end of lood it shows empty line then restart again. how can i make this slider without empty state gap? blank part:

Hello, i found some slider using Gsap but i want to modify it with timelines. My goal is when i start scrolling my slide scroll and set rotation to 0 I tried to combine it with timeline but it jumps or anims end when i didnt scroll yet. Without timeline all of them rotates at the same time.

Hi, I'm working on a website where a large image scales as you scroll. At page load, I want the image to start at 20% scale and be positioned higher on the y-axis so that it's visible in the viewport. While the setup mostly works, I've encountered an issue: when I apply a negative y-position, the scaling no longer happens from the center. https://codepen.io/remcovb/pen/eYwvGqb However, when I remove the negative y-position, the scaling works correctly from the center, but then the image isn't in the viewport anymore. https://codepen.io/remcovb/pen/bGPqoyo Any advice on how to maintain centered scaling while keeping the image in the viewport? Thanks in advance!

I've been struggling with this code all day. I've tried everything to get the hover effect to work correctly with a .reverse() but this was the closest I could get to it working correctly. Apparently, it works fine when hovering and unhovering the mouse, but if I repeat these actions, the animation freezes or does weird things. How can I fix this, or is there a better way to do this hover animation? I'd appreciate any help.

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 !

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!

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 !

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)

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))

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?