Search the Community

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.

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?

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!

useEffect(() => { gsap.registerPlugin(ScrollTrigger, ScrollToPlugin); const section: any = scrollRef.current; const scrollContainer = section.querySelector(".scroll-container"); const scrubTween= gsap.to(scrollContainer, { x: () => -(scrollContainer.scrollWidth - section.offsetWidth + 104) + "px", ease: "none", scrollTrigger: { trigger: section, start: "center center", end: () => "+=" + (scrollContainer.scrollWidth - section.offsetWidth), pin: true, anticipatePin: 1, invalidateOnRefresh: true, scrub:0, onUpdate: (self) => { if (self.direction === -1) { // Scrolling upwards gsap.set(scrollContainer, { x: 0 }); // Reset horizontal scroll position } }, }, }); return () => { ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); }; }, [])

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 ?

Hi guys, I'm trying to implement a horizontally scrolling gallery on my website in Webflow. I want it to be sticky until the gallery reaches the end, and then the page to resume regular scrolling. There are a number of youtube tutorials that I tried, but none worked. I have to admit, although I have a tiny little bit of experience in simple coding, I am by no means a pro. In fact, quite the opposite. After having tried to make this work for the last 5 hours, I think I can justify asking you guys Youtube-Turorial: https://www.youtube.com/watch?v=_LWinkSulwU The website I'm trying to build: https://tobias-kopp-fotografie.webflow.io/home-new-copy-scrolltrigger2 Would be so awesome if you could help. I bet it's some stupid minor detail that makes it not work at all. I tried to find that error so hard, whithout success ... Cheers, Tobi

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

Hello, after Chrome last update, my code doesn't work anymore. Video is flickering on scroll. I activated controls on video to check the correct animation of GSAP and all seems to be good but video doesn't follow scroll correctly and needs seconds to align with the scroll position. Video is encoded correctly and since 5/6 day ago, it worked correctly an all devices and browsers. On Safari, for example, it works correctly. It seems that the problem is related to Chrome on Mac. Does anyone have a suggestion? Thanks so much. Here's the code to play video on scrub. //GESTISCO IL PLAY/PAUSE DEL VIDEO SECONDO LO SCROLL let video = document.querySelector('#thevideo'); let sections = document.querySelectorAll('.gsap--section'); /* Make sure the video is 'activated' on iOS */ function once(el, event, fn, opts) { var onceFn = function (e) { el.removeEventListener(event, onceFn); fn.apply(this, arguments); }; el.addEventListener(event, onceFn, opts); return onceFn; } video.play(); // must call .play() first, otherwise it won't trigger things to be scrubbable (weird) video.pause(); var containerH = $(".gsap--outer").outerHeight(); //TIMELINE const videoTl = gsap.timeline({ scrollTrigger: { scroller: '.inner-site', pinType: 'fixed', anticipatePin: 1, trigger: ".gsap-pincontainer", start: "top top", end: "+=" + (100 * sections.length) + "%", pin: true, scrub: 2, // markers: true, } }); videoTl.to( video, { currentTime: 14, }); videoTl.to(".gsap--outer", { y: -(containerH - innerHeight), //100% - altezza del col-span }, "<"); }

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

I have main section in I have a HERO section when I scroll down to horizantle-scroll-wrapper then these 3 boxes should slide from right 100% to 0% onScroll mean when I scrolled down hero then box 1 will scroll from RTL when it reach 0% then If I further scroll then 2nd box will scroll according to scroll value. when all boxes are scrolled then body will move down to footer. When I scroll from footer (bottom to top) my horizantle-scroll-wrapper content which alread moved from RTL now it should move LTR. Note We have to use GSAP //HTML <div class="main"> <div class="hero box"> <h1>hero</h1> </div> <div class="horizantle-scroll-wrapper"> <div class="orange box"> <h1>1</h1> </div> <div class="purple box"> <h1>2</h1> </div> <div class="green box"> <h1>3</h1> </div> </div> <div class="footer box"> <h1>Footer</h1> </div> </div> //CSS .main { height: 100vh; overflow-x: hidden; } .box { height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; font-size: 80px; } .purple { background-color: purple; } .orange { background-color: orange; } .green { background-color: green; }

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!