Search the Community

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!

Greetings! I have these two simple scrub animations. The first makes each section fade in when it enters and the second makes each section fade out when it leaves. They work fine like this but I imagine there's a way to cleanly combine the two, but I can't figure out how... const fadeIns = gsap.utils.toArray('.d-section'); fadeIns.forEach(fadeIn => { gsap.to(fadeIn, { scrollTrigger: { trigger: fadeIn, start: 'top 66%', end: 'top 33%', scrub: true, }, autoAlpha: 1, ease: 'none', }) }); const fadeOuts = gsap.utils.toArray('.d-section'); fadeOuts.forEach(fadeOut => { gsap.to(fadeOut, { scrollTrigger: { trigger: fadeOut, start: 'bottom 66%', end: 'bottom 33%', scrub: true, immediateRender: false, }, autoAlpha: 0, ease: 'none', }) });

Hi everyone, First of, I wanted to say that I recently became a premium member of GSAP Club, which is pretty exciting and nice Now to the issue. I am using GSAP in NextJS project. The video at the bottom of the post pretty much sums it up, if I scroll to the ScrollTrigger trigger element that has a scrub true and stop halway or more (as long as screen is still "inside" the element) and then hit refresh in the browser, the animated element jumps into abyss (I think it jumps back to the top of the trigger element / it's parent element). And then if I scroll in ANY direction, the element comes into the view and gets pinned correctly.. until I refresh the page again. Now, I know for sure that I am doing something wrong and it is most likely extremely obvious or just some react thing that I completely missed, but I did try a few things that just didn't work for me I hope someone knows exactly what this is but if not, I will probably have to make some minimal demo.. As I said, I did try couple of things and I searched the forums, but no success. Component code: import { useRef } from "react"; import gsap from "gsap"; import { useGSAP } from "@gsap/react"; const PromoVideoElement = () => { const videoContainerRef = useRef<HTMLDivElement>(null); useGSAP( () => { const videoContainer = videoContainerRef.current; if (!videoContainer) return; const video = videoContainer.querySelector("video"); if (!video) return; gsap.to(video, { scale: 1, scrollTrigger: { trigger: videoContainer, start: "-=100 top", end: "200% top", pin: true, scrub: true, }, }); }, { scope: videoContainerRef }, ); return ( <div ref={videoContainerRef} className="aspect-3/2 mx-auto mb-56 mt-56 block w-[81%]" > <video data-cursor-size="100px" data-cursor-icon="play" data-cursor-icon-color="#352f36" data-cursor-color="white" controls={false} autoPlay muted preload="metadata" loop className="w-full scale-[1.4] rounded-3xl" > <source src={"/promo-video-homepage.mp4"} type="video/mp4" /> </video> </div> ); }; export default PromoVideoElement; IMPORTANT NOTE: I tried adding invalidateOnRefresh: true inside ScrollTrigger, but that didn't help. Thank you very much for your help! EDIT: Guys, I am very very sorry, while waiting for an answer I came to realization that I was using a custom gsap provider that I made, where I wrapped all elements and animated them on load, I also wrapped this component in page.tsx, which caused this problem. I have been brainstorming about this for so long only for me to ralize how stupid of mistake I made. Please close this thread as solved. Sorry once again.

I am new to frontend and have started using gsap for animations. I use gsap mainly for switching between sections. On screens larger than 576px I have a problem: when switching between sections there are jumps and they disappear after a while if you scroll up and down the page. Maybe someone has encountered this ? I don't seem to have a lot of animations so far, but already so laggy. Here's what I tried to do: 1. Remove all possible negative margins. 2. Add to all elements to which the transition is made, properties: transform: translate3d(0,0,0,); will-change: transform; backface-visibility: hidden; 3. Set property ease - sine, power1, power2. All this had no effect. In the mobile version I have a lot of animation that works perfectly with gsap.

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!

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. ?