Search the Community

i am trying to create an effect where the card has an intro animation, then it has a certain arrangement and after some time has an outro animation. i want everything to be on a scrub. for the positioning of the elements i have tried to use the flip plugin. but i can't seem to make multiple ones work on scrub. everything seems to be playing all at once.

hey there hope you guys are having a good day , i have a scenario which i should animate a element in while it has a scroll trigger and scrub lets say the loading state ends and then the box should animate from its original position to some where lets say { y : 0 } -> { y : -100}. the problem is i want this element to also have this animation with scroll trigger and scrub to true , i searched a lot for the possible ways but none of them worked smoothly until i found this and added a little code to control my animation with it but it might gets a little bit laggy if the user scrolls fast since the onUpdate on gsap tween which i wrote might doesn't run smoothly , does any one have any better solution to achieve my goal ?

Hi everyone, I’m running into a specific issue where I need to play a regular (non-scrubbed) timeline inside a pinned section that is scrubbed. Here’s what I’m trying to achieve: I have a ScrollTrigger that pins a section (let’s call it #host) for a certain scroll distance. Inside that, I animate .intro-content with scrub as the user scrolls — this part works fine. Once .intro-content fades out, I want .speaker-content to animate in like a normal GSAP animation — not scrubbed — with some epic entrance. However, I still want this second animation to be bound to the scroll position (reverses when scrolling back), just not scrubbed like the first. Right now, everything plays scrubbed if it’s in the same timeline, and if I break it out into another timeline, it seems disconnected or doesn’t trigger correctly inside the pinned context.

I already posted a similar problem, but I later realised that the solution I received was not wo sufficient: I have two scroll animations after each other. The Pin-Spacer of the first animation overlays the a tags at a certain scroll position and so there unclickable because they're overlayed by the pin-spacer. Is there any way I can make the a tags clickable? Mabe make the pin-spacer layer not blocking or something else. (if I enable pin Spacing the a tag gets clickable but then there's a huge white space between the two animations.) Thank you for your answers!

Hi all, in my project where I instantiate lenis in a container and not in the body as by default, when I resize the window it seems that scrolltrigger is unable to calculate the new start & end correctly, did I do something wrong in the scrollerProxy configuration?

I have an animation on these cards that is changing the height of some spacers above these cards to get a neat scrubbing affect. The animation works great and scrolling down with the scroll wheel is just fine, but if you click on the scrollbar and drag it down, you'll notice that when it hits the animated area, it slows down significantly. I know that this is caused because the height of the entire page is decreasing which does need to happen. Scrollable height changes = scrollbar speed change. My question is how do I stop or at least reduce this from happening. It almost feels like scroll jacking which I hate. I also noticed that this does not happen on safari. I haven't check other browsers besides chrome (sidekick) and safari.

Hey all! This feels like it should be simple enough to do and yet I can't figure it out or find an answer in the forums. When you scroll down, the bars scale up until they reach their full height at the end of the 'body'. What I want to simply do is have them 'stagger' on scrub, or if you will, each bar, starting from the left one, begins to scale up only when the previous bar has finished. I can imagine doing this with a scrubbed timeline, but is there an easier way?

Hello GSAP people, I already know the answer is probably easier than I think, but I can’t seem to figure it out. Here’s a small demo: https://codepen.io/PhilippeGoulliart/pen/PoMwPoX I'm trying to set up horizontal scrolling of the "train" inside the frame. The problem is that when I reach the middle of the scroll, I expect to see only the purple square—meaning that the train has translated by 33.333%, which is half the translation I want. However, instead of seeing only the purple square, I end up further into the timeline, seeing half of the purple square and half of the pink one. I’ve tried adjusting the scrub to a number and changing the easing values, but nothing seems to solve the issue. Thanks in advance for any help you can provide!

As you can see from my CodePen, my image zooms in when scrolling down and pins until its finished. My question is, how can i make the zoom more interesting to where the image is revealing more as it zooms in ? So it starts off small like it currently is and then instead of just zooming in, it maybe reveals more of the surrounding image as it zooms. Does that make sense? Would love to know if anyone has any ideas on this.

I am struggling to get this effect to work. There is a hero image with parallax that is working. But the logo, which starts full size and fixed to the bottom of the hero container (with a slight overlap of about 75px at the bottom), needs to resize smaller to fit in the sticky header at the top. This should scrub with the scrollbar and be sticky at the top shortly before the hero is fully scrolled past. I've spent days trying to get this to work, and I can't find any examples anywhere that have helped me get to the bottom of the issue. Any help would be greatly appreciated!

Hi all ? https://codepen.io/mikhail21990/pen/QWPEeRP I use two pin animations In the first, the block stands still and the photo is scrolled from bottom to top from the top of the text. in the reviews block, the block also stands still while the animation is running, containers with reviews should move from right to left. Separately, the animations work as they should, but together for some reason an incomprehensible flickering effect occurs. Tell me what could be the problem ?

I have added a Scrolltrigger Interaction where content switches based on the slide image active. When I'm scrolling in the content switching is very easy as I'm running a function changeSlideContent(index) onStart. When I scrub back to top, any idea how do I switch title, content, index, and dot with respect to their image active. For each slide Image, there is a data attribute through which content is changing. Any idea how to achieve this smoothly? I have attached the codepen link. I tried the whole day figuring out this, hoping the community will have my answers

Hi Awesome, GSAP community! I'm trying to achieve scrubbing using GSAP Flip animation. I'm facing an issue while scrubbing back to the top. Any idea why it's happening? Here is the codepen URL: https://codepen.io/azizqamar7/pen/XWGozxM When the end of the element crosses the center of the screen, while scrubbing back GSAP FLIP doesn't work properly, am I doing something wrong?

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

Hello guys. Attached code pen. I am new to GSAP and you can see the animation its basically at a background on a website I want to start showing this on my scroll trigger with my scrub I am a little new to gsap cannot do it can you guys please check it. Attaching the SVG too if you want to do it. The gaps that are coming has elements between them and it will come like this in the attached screen shot. Attaching the svg too. Please make it happen for me. Group 35.svg

Hello everyone, I have a serious problem that I can't solve. I need to add buttons to my animation to go back to markers in time. But as my animation is scrolltriggered with scrub:true , when I play the timeline to the labeled time, I get an offset between the animation and the scroll position. Is it possible to solve it? Thank you very much

Hello, I want the perspective to improve as the scroll moves down, and then I want the scroll to continue. In my example, the perspective improves, but the scroll does not have a pin, it moves normally. Can you help me?

I want the video to play smoothly on scroll, here on my code pen demo it's not smooth, how do I make it better?

I have a problem with three js and gsap animation, its logic is that as I scroll, the faces of the cube are attached to the cube itself. when you attach a face to the cube, the face becomes for a while with 100% transparency. The problem is that let's say in production when I update the page in the section below the section with the animation I described above, all of the faces of my cube become opaque as if they are simultaneously joined to the cube, what can this be about and how can it be fixed? now will send my code in the next message animation: useIsomorphicLayoutEffect(() => { if (!width) return; if (width >= 1200) { const changeOpacity = (props: ChangeOpacity) => { const { variant = "increase", selector, start = "+=75", end = `+=${window.innerHeight}`, } = props; if (variant === "increase") { return gsap.to( {}, { scrollTrigger: { trigger: contextRef.current, scrub: 0.1, start, end, onUpdate: (self) => { const progress = self.progress; gsap.to(selector, { opacity: progress * 2, duration: 0, }); }, }, } ); } return gsap.to( {}, { scrollTrigger: { trigger: contextRef.current, scrub: 0.1, start, end, onUpdate: () => { gsap.to(selector, { opacity: 0, duration: 0, }); }, }, } ); }; const ctx = gsap.context(() => { changeOpacity({ selector: ".first-panel", start: `+=75`, }); changeOpacity({ variant: "decrease", selector: ".first-panel", start: `+=${75 + window.innerHeight + 75}`, }); changeOpacity({ selector: ".second-panel", start: `+=${window.innerHeight}`, }); changeOpacity({ variant: "decrease", selector: ".second-panel", start: `+=${window.innerHeight * 2}`, }); changeOpacity({ selector: ".third-panel", start: `+=${window.innerHeight * 2 + 75}`, }); changeOpacity({ variant: "decrease", selector: ".third-panel", start: `+=${window.innerHeight * 3}`, }); changeOpacity({ selector: ".fourth-panel", start: `+=${window.innerHeight * 3 + 75}`, }); changeOpacity({ variant: "decrease", selector: ".fourth-panel", start: `+=${window.innerHeight * 4}`, }); changeOpacity({ selector: ".fifth-panel", start: `+=${window.innerHeight * 4 + 75}`, }); changeOpacity({ variant: "decrease", selector: ".fifth-panel", start: `+=${window.innerHeight * 5}`, }); changeOpacity({ selector: ".sixth-panel", start: `+=${window.innerHeight * 5 + 75}`, }); }, contextRef); return () => ctx.revert(); } }, [width, contextRef]); codesandbox: https://codesandbox.io/p/sandbox/sharp-fast-j625lw problem: must be like this :

I want to implement an animation that would collect parts of the cube on a scroll. The farther you scroll, the more faces of the cube joined. I encountered a problem that the animation works only if markers: true. I read a thread on a similar case, it said that the parent has flex or that the height is not 100vh, but none of that worked for me. In the case where markers: false, the animation works until the first edge, and then the scroll works as normal, not as scrub. What are some other options to solve the problem? The link with the current problem: https://codesandbox.io/s/optimistic-poitras-cym566?file=/src/cube.tsx

Please refer to the codepen and then third slide/section in the horizontal scroller. I have placed the comments "attempting to move c3 from top left to top right, then top right to bottom right" in both the JS and HTML so you know the area to focus on. Q). How would you move an object from: top left, to: top right, then from: top right, to: bottom right. What I am trying to understand and learn is how to chain animations (if that is the right term) and sequence (time them) one after the other, all while scrub is enabled. Thank you. ?

Hi Guys. I am new to GSAP, GSAP3 and scrollTrigger. I have been trying to implement some of the basics to learn how to use GSAP and ScrollTrigger. Please refer to the codePen. I am trying to make the letters (YEAH) in the first horizontal sliding section move up then down then up then down through the "scrubbed" animation. In other words, how do I make them go up and down multiple times instead of just the once. I have looked for examples and have been unable to find anything doing this. Can it be done?

Hello, I'm trying to animate a slideshow using ScrollTrigger & scrub. I have snap set up and it works ok, but if you scroll with too much momentum you'll blow right past a slide/snap point. Is there a way too make the snaps mandatory? I don't think I can use CSS as the slides are absolutely positioned on top of one another. Also with less momentum the snap animation seems to take a very long time to start. I would like the snap to happen at roughly the same speed regardless of momentum, is that possible? Apologies if this has been covered somewhere else, I did my best to read the docs and search the forum.

I try to do when I scroll down, the top section which name is "container" will be pin and I saw it' pinned but scrub not working, and another the image will be go one by one layout

I want to start by apologizing for the JS. I am learning how to use MVC organization and was testing it out with this project. I know it isn't great but I'm learning ?. So... my problem here is that while I have my animations working perfectly on first load... I can't figure out how to reset the timeline and scrolltrigger when the window is resized. I understand that certain aspects will automatically recalculate but I need to recalculate certain element positions on the page. I might be going about this completely wrong as I have many examples of similar types of animations that don't have nearly the JS I have. One tricky caveat to my problem is that this is being built is Hubspot using repeaters for the sections, so I can't hard code the 'tl-line' element. I have to dynamically generate the top position and height of that line based on the center of the first and last bullets. In this example there are only 4 sections, but there could be 2 or 10... who knows. Anyway, I am explaining that to help you understand why it looks like a convoluted way to build the trigger elements positioning. Any help is much appreciated. Thanks!