Search the Community

I am struggling to play video by scrolling the page. I have two main issues: 1. How can I properly cleanup animation?! (I need to scroll to top back when i refresh the page) 2. How can I start playing video when it reaches to the top of window while keeping current position until video finishes. Once it's done, I continue to scroll to bottom. Here is my minimal video. https://stackblitz.com/edit/nuxt-starter-sv6wqk?file=app.vue thanks for the help in advance)

Hello, I am trying to recreate the text scroll effect from this website (https://synthetic-humans.ai/) using ScollTrigger but I cannot figure out how the text is pinned at the center. Here is what I came up with https://codepen.io/dev_loop/pen/ExJOLgx?editors=0010 I also tried making the sections fixed and increasing the body height based on how many sections were present but the animation state was already finished

I use scrolltrigger and observer for an animation in my website, for mobile it created a problem of not pinning accurately so I used normalizescroll. It does work great but, when I scroll, it scrolls really fast. is there any solution for it?

Using killAll is still being called. Since now my page is loading repeatedly it crashes so I'm looking for the cause https://github.com/hengshanMWC/gsap-ScrollTrigger gsap@3.12.5

I have my page where every section needs to be 100vh height and have a `scroll-snap` effect, but the footer needs to be `fixed overlapping` from the bottom. I added minimal reproduction, but when you want to stop scrolling the footer, the page jumps on top; sometimes, it just stops on the footer and only scrolls on the footer. Something magical is happening here, please help me) Also, I tried to move the snap effect to GSAP (based on this codepen — https://codepen.io/GreenSock/pen/NWxNEwY ), but it started lagging very hard (maybe because of the Three.js model in the background), and on iPhone, scrollAnimation started to be limited to only 60fps (on Pro versions, where we have ProMotion 120Hz, it is very ragged). Will be very grateful for some help with this ☺️

Hello, I am having some troubles making a scrolltrigger animation in a nuxt component. Basically I have a lenis script for a nuxt page and inside this page a scrolltrigger script for the projectItem.vue component. I installed gsap via npm and imported it both in the page and the component. I don't know why but the code seems to work because we enter in the onEnter() callback but there is no animation at all. Here is a link to the stackBlitz of my project, hoping someone can help me : https://stackblitz.com/~/github.com/Mitiss25/portfolioFinal Thank you !

I saw this codepen where when you scroll down on a page the 3D picture moves with the page as it scrolls down. It also grows and rotates depending on which section in. I Copied the code and change it so it would work on a div element in html. When I tried it, the div would only move in the first section, not the rest. How would I be able to move a div element along the page as I scroll to the bottom, the EXACT way as the codepen below? This code does not use the motion path plugin only the scroll Trigger plugin which is okay since its free. The animation I want: Custom Keyboard Landing Page with Spline 3D and GSAP Scroll Animations (codepen.io) The animation I made: Relocate on Scroll (codepen.io)

When the screen width is smaller than a certain width, the content of the menu cannot be scrolled to see all the content. When the markers are deleted, the scrollbar will disappear and not work. When I add content and use ScrollTrigger, it will conflict with the ScrollTrigger used by the menu. How can I separate the ScrollTrigger of the menu and the page content so that they can work separately? This is a minimal demo URL: https://stackblitz.com/edit/nuxt-starter-gnsxip?file=app.vue,components%2FmenuModal.vue,.gitignore This demo uses Nuxt 3.

Hello, I'm new to GSAP and I'm trying some handy animation. Here is what I'm trying to achieve https://genevoism.com/. I know they have used different approach but I belief such animation are possible in GSAP too. I using combination of ScrollTrigger, ScrollTo, Observer and using timeline pause and play method to achieve one scroll animation effect. By one scroll I mean that each of animation would be trigger per scroll. Approach I took : > Firstly I have made different timeline for different animation per section. > Than I tried to get user scroll using observer's onUp and onDown methods. > Than after per scroll I play my desired timeline and as one of the tween of that timeline gets completed I pause my timeline, further when user will scroll again timeline play's and pause's again. > When all tweens in one timeline gets completed, I switch to other timeline by pausing the first one. > I have also used a forEach loop on scroollTrigger.create so that I can pin the particular section as animation are being performed. What I want: I want set of animation such that when my section comes in viewport or is already present in viewport( like hero or banner ) the animation should get started as the user scroll. Each and every animation or tween should start and end between two scroll of user. And as all the animation in a section get's completed it should slide up or down as per user's scroll 100% or 100vh. Please have a look into the below pen and guide me where I'm going wrong. Thank you... <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Hello. I'm facing a problem with an animation i want to create with scrollTrigger. I join a codepen to explain my issue. I have a div .slides between other content and it's composed of several slides. When i reach my div .slides, I want it to pin to the window and its slides should be displayed progressively, sliding from the bottom of the screen. When the last slide is displayed, the rest of the content must scroll normally. I tried multiple thing but i failed Anyone to help me and show me what's wrong in my code. I would be grateful Thank you

I've been working with GSAP for quite some time now, utilizing the GSAP Premium Version. Specifically, I integrate GSAP into next.js applications (SSR). I've reviewed numerous documentation resources on GSAP/next.js and believe I'm employing GSAP according to best practices. For the most part, everything functions smoothly. However, I'm encountering issues with the Scrolltrigger. Whenever I bind animations to a Scrolltrigger that uses a React Ref (useRef) as a "trigger," errors consistently arise. During the initial load of a very long page, components on the page utilizing a Scrolltrigger sometimes throw an error: "Cannot read properties of undefined (reading 'end')." This problem seems to be related to the Scrolltrigger not having an element available. It is also the case that if I set the trigger via React ref, an error is thrown, but if the trigger is set via CSS class, no error is displayed. scrollTrigger: { invalidateOnRefresh: true, start: 'top center', trigger: containerRef.current // throws errors sometimes } scrollTrigger: { invalidateOnRefresh: true, start: 'top center', trigger: '.container' // throws no error, seems not working properly all the time } According to the documentation, there's an option to set nullTargetWarn: false in gsap.config, but this doesn't suppress the errors being thrown. Somehow, this seems to be related to SSR of the component, as the errors seem to disappear when I don't load the React component via SSR. I'm employing common patterns, such as "useIsomorphicLayoutEffect" or checking within the hook if the Ref element exists. However, this doesn't seem to resolve the issue either. import { useEffect, useLayoutEffect } from 'react' export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect const List = ({ title, titleSize = 2, subtitle, items }) => { const containerRef = useRef() const listItemsRef = useRef([]) useIsomorphicLayoutEffect(() => { if (!containerRef.current) return const ctx = gsap.context(() => { gsap.to( listItemsRef.current, { clipPath: 'polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)', duration: 1, opacity: 1, scrollTrigger: { invalidateOnRefresh: true, start: 'top center', trigger: containerRef.current }, stagger: 0.2, y: 0 }, 0 ) }, containerRef) return () => ctx.revert() }, []) return ( <div ref={containerRef}> ... gsap.config({ nullTargetWarn: false }) The error is quite ugly because on the production environment, the entire frontend crashes if the error is thrown and not caught manually. Does anyone have any tips on what might be causing this?

Hello! I caved the other day and now I'll be doing a LOT of GSAP 😆 Background: I tried replicating the Fake Scroll (Horizontal) demo and integrating it with SmoothScroller on a Svelte/Sveltekit site. It works on CodePen, and similar it works if I stick the SmoothScroller code inside the Horizontal component. Problem: I rather have the SmoothScroller in layout.svelte, because I'm using it across the *entire* site. If I stick it inside the Horizontal component, other things on the page break. If I have both a global and local component instance, other items on the page jitter (I'm assuming the SmoothScrollers are in conflict over the elements). Most of the other components play nicely going forwards (not in reverse or on resize, but that's another problem 😅). I have attempted to replicate the issue with a minimal demo on StackBlitz. It's not exactly the same, but it is similar, so I'm hoping that perhaps someone shedding either some light on how that should work or best practices will help me solve my initial issue. The issue I'm seeing on StackBlitz is that the full number of sections isn't showing; it is similar on my local site, except that it also disappears VERY quickly and there's a ton of space down the page where the animation should be scrolling. One thing at a time, I guess. Help would be immensely appreciated!

I am going slightly mad. I have spent nearly a week trying to get this to work and I can't understand what's going on. I have been trying to some basic pinning with a clip mask and I just can't get it to behave responsibly. Annoyingly on that codepen URL it's actually okay, but on my website, it's not, which I realise makes things difficult. I have done another codepen with ALL my GSAP code (rather than it reduced to the animation in question which is linked above) and that one glitches more so there must be some offending code elsewhere, but I can't work out what, as it all seems fine to me. https://codepen.io/shereewalker/pen/gOyxppY I am removing each piece of extra JS to see if I can work it out, but so far nothing is working. I am basically just trying to refresh the calculations on window resize for that animation - and actually for all of them Any help would be amazing as I am at my wits end! Thanks!

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

Hello everyone! I'm a newbie in GSAP and I've read the documentation as well as common mistakes. But probably I haven't understood everything completely. https://codepen.io/Dumbldrr/pen/NWmBOdd I'm trying to animate a single element using multiple ScrollTriggers. In my demo, there's a set of sections and a fixed overlay. According to my plan, the overlay should change its opacity at certain sections and fade out in the last specific section. I've set up a chain of triggers, but for some reason, when I add the final trigger responsible for the last fade-out animation, tweens breaks, and the overlay's opacity fires at the start. Also, I tried to refactor the tweens using only `.to` with `immediateRender: false`, and the animations work fine, but another bug arises - when I load the page in the middle or at the end of the scroll position, the animations also break. Here's the second demo (you can load it from mid/end position of the page in debug mode): It seems like I've made some mistakes in the code and I will be very grateful for any advice. https://codepen.io/Dumbldrr/pen/LYvBqNq

I am having an issue I have seen described in other contexts but haven't found a solution for. My project is using the Next.js framework for react, Smooth Scrollbar, and ScrollTrigger. I have a .to() with a scrollTrigger object inside that is in a <Navigation /> component. The text at the top of the page is just supposed to pin itself and scroll with the window, but it only works in some cases. I think I'm not fully understanding some lifecycle thing here. All these methods of reproducing my errors are also commented at the top of the index.js file in the sandbox With Smooth Scrollbar enabled, the scrollTrigger object stored in the <Navigation /> component, and the <Navigation /> component imported and nested in the main functional component, the effect does not work after refreshing the page. If you go into the scrollTrigger object in the <Navigation /> component and update one of the values (change the 'end' value to a different number) this will trigger a hot reload without refreshing the browser. If you scroll back to the top and scroll down, you will see the effect is now working. If you comment out the entire useEffect() hook in the main index.js component this will disable Smooth Scrollbar. If you save the file and refresh you will see the effect working as intended, without having to trigger a hot reload, but now there is no Smooth Scrollbar. If you reset the sandbox to the original state, uncomment the HTML in the main index.js components return, comment out the <Navigation /> component right above it, save and then refresh, you will see that the effect works on load, with Smooth Scrollbar, without having to trigger a hot reload, but now I've lost the ability to nest components. CodeSandbox link Direct link to results in browser (A little easier for refreshing) Any help would be greatly appreciated. I'm out of ideas at this point.

Hello everyone, I'm currently trying to replicate the effect demonstrated in the uploaded GIF. While I've successfully implemented the easing effect, I'm encountering difficulties with the stagger effect. I've experimented with various approaches, with the latest attempt shown below. I can prepare a CodePen example if needed. Perhaps I'm overlooking something simple. Any guidance or suggestions would be greatly appreciated. Thank you! useGSAP(() => { let proxy = { translate: 0 }, translateSetter = gsap.quickSetter(".video-grid-content-container", "translateY", "px"), clamp = gsap.utils.clamp(-40, 40); ScrollTrigger.create({ onUpdate: (self) => { let translate = clamp(self.getVelocity() / -100); if (Math.abs(translate) > Math.abs(proxy.translate)) { proxy.translate = translate; gsap.to(proxy, { translate: 0, duration: 0.4, stagger: { amount: 10, from: "start" }, overwrite: true, onUpdate: () => translateSetter(proxy.translate) }); } } }); });

Hi, recently i created a code with scrollTrigger. When I resize the browser to check for section responsive, there will white space that appear at right side of the browser briefly (shown as in the image attached). When I didnt apply scrollTrigger, the white space wont appear and the section resize normally. Is there anyway to solve this problem or reduce the white space effect My english isnt that good, any help will be appreciated! Thank you!

Is it possible to manipulate opacity on both scroll Trigger and also on hover Pls help i am not able to find a solution , i also tried framer motion it also did not help , problem is either scrollTrigger based animation is working for opacity or the hover one and both dont work

Hello ! I'm new with scrollTrigger and I don't understand how I can pin elements inside my horizontal scroll section. For example, in this codepen : https://codepen.io/PaulettePaillette/pen/MWjeqdb I would like the scroll to stop when the number 3 (grey div) "touch" the left side of the screen. And then the number 4 scroll above the number 3 section and the classic horizontal scroll continue. I think it's possible, I hope, but I don't understand how to make it. I hope my issue is clear, and someone could help me on it. Thanks

Hello everyone, I'm new to GSAP and I'm having trouble with the scroll trigger. In the last "Hello", as you can see in the demo, it is scrolling out of view. But I want to let it stay in the screen. But I just couldn't make it work. If anyone can help me I much appreciate. Thanks!

Hello everyone! I have problems with the grid section, where each of the elements must in turn "open up" to the full screen. At the same time, it is important that the elements "feel" each other next to each other, so that each of the elements is pushed out of the screen. Right now my animation is not working properly, as each of the elements does not expand to the full screen. Please help me! https://codepen.io/karjala_kilka/pen/qBwyoab

Hey all, I have been using the forum resources and demos to help build the linked GSAP/Scrolltrigger section. It's pretty straightforward in objective, but I can't get it to enter and exit how I want and was hoping someone could take a look at my code and let me know if there's a solution. I have 4 sections or "slides" Patented copy + motionless video 1 2.) Unrivaled copy + video 2 3.) Meticulous copy + video 3 4.) 70% copy + video 4 Each video plays and pauses when it is finished, waiting for the scroll to trigger the next section and "continue" playing the video (by playing the next video). My goal: a.) Scroll into this section and have slide #1 be default, so you do not need to scroll past a blank section to get to it. b.) Once slide 4 appears, I would like the user to be able to scroll away from this section without, instead, scrolling to a blank space before being allowed to continue. bonus goal: remove the flashing fade transition between videos I'm sure I have made some grave mistakes with this code, and am looking to this community for a fresh set of eyes. Any help is appreciated. Thank you! Joseph

Hi there, I am new to ScrollTrigger and was trying to create a simple scrollytelling page as shown in the codepen below. The pinning of sections 1 and 3 works well. However, for section 2, pinning didn't work and it just scrolled passed without pausing. Expected behavior: On enter section 2, it is supposed to be pinned like the previous section. After 2 scrolls, unpin and then proceed to the next section. Any advice is greatly appreciated. Thanks!

code sandbox I'm new to GSAP and am struggling getting a certain animation to work using scrollTrigger when my elements are in a grid layout. The animation aims to move the content horizontally as the user scrolls, and I've taken out the relevant components into this code sandbox. Apologies if there's still too much code in there, but I wanted to make sure the code is representative of the components I have in my project, in case there are nuances causing the problem. In App.tsx, if you uncomment all the code, you'll find a grid layout containing a 'navbar' on the left, and the main content on the right. Currently, with the grid commented out, the animation works fine, but if you include the grid, it all breaks for reasons I don't understand. I've read through the common mistakes for GSAP and scrollTrigger and don't think this is covered. I also have a couple of other smaller issues as well please in the ExperiencePage.tsx component: toggleClass on scrollTrigger doesn't apply the .active class to components. the width variable isn't being updated as the browser window is resized, despite me setting invalidateOnRefresh to true and using a function to define the end attribute in the scrollTrigger configuration. Appreciate any help with this please.