Search the Community

My scrollTrigger items inside other scrollTrigger start their animation at the same time But i need them to start one-by-one and parent scroll to stop until each animation ends. I'm completely frustrated with this Here's my code: const horizontalSections = gsap.utils.toArray('section.horizontal') horizontalSections.forEach(function (sec, i) { var thisPinWrap = sec.querySelector('.pin-wrap'); var thisAnimWrap = thisPinWrap.querySelector('.animation-wrap'); var getToValue = () => -(thisAnimWrap.scrollWidth - window.innerWidth); st.value = gsap.fromTo(thisAnimWrap, { x: () => thisAnimWrap.classList.contains('to-right') ? 0 : getToValue() }, { x: () => thisAnimWrap.classList.contains('to-right') ? getToValue() : 0, ease: "none", scrollTrigger: { trigger: sec, start: "top top", end: () => "+=" + (thisAnimWrap.scrollWidth - window.innerWidth), pin: thisPinWrap, invalidateOnRefresh: true, anticipatePin: 1, scrub: 1, } }); gsap.utils.toArray(`.portfolio`).forEach((section, index) => { const tl = gsap.timeline({ scrollTrigger: { trigger: section, start: "center center", end: () => "+=" + ((section.offsetWidth)), scrub: true, pinReparent: true, anticipatePin: 1, immediateRender: false, onUpdate: (self) => { if (self.progress < 1) { stopSt() } if (self.progress === 1 || self.progress === 0) { runSt() } } }, defaults: {ease: "none"} }); tl.fromTo(section.querySelector(".afterImage"), { xPercent: 100, x: 0}, {xPercent: 60}) .fromTo(section.querySelector(".afterImage img"), {xPercent: -100, x: 0}, {xPercent: -60}, 0); });

Hi everyone, I'm experiencing an issue with my animation. I've searched through existing topics, but couldn't find a solution that matches my problem. To provide some context, I've created a dynamic page for displaying project details. It consists of a description section on the left and an image section on the right. The description is scrollable, and the image changes based on the current description. The issue like i start from project/1 i show all there descriptions all good but when i go to the project/2 or project/^n the scroll still in the register or some where that affect to my animation (the scroll affect to the first image because the scroll still ) ,However, everything works fine if I refresh the page like what i want , So, I'm looking for a solution to reset the ScrollTrigger and resizing functionality dynamically. (methods or props in the useGSAP) Thanks for your help, and I apologize for the lengthy explanation. I just wanted to ensure the context is clear. gsap.registerPlugin(ScrollTrigger); const workInfoItemsRef = useRef(); let imageRefs = useRef([]); const ParrentRef = useRef(); useGSAP( () => { // initialise the imageRefs if ( workInfoItemsRef.current && imageRefs.current.length > 0 && NumberOfFeature > 1 ) { // N2aficti ZIndex directly lrefs: imageRefs.current.forEach((item, index) => { item.style.zIndex = imageRefs.current.length - index; }); // nInitialiser clip-path b refs: gsap.set(imageRefs.current, { clipPath: function () { return "inset(0px)"; }, }); // nCriyi l'animation : const animation = gsap.to( imageRefs.current, // fiha ta last child ! rd lball { clipPath: function (i) { return i != imageRefs.current.length - 1 ? "inset(0px 0px 100% 0px)" : "inset(0px)"; }, stagger: 2, ease: "none", } ); // nCriyi ScrollTrigger l Parrent ref: ScrollTrigger.create({ trigger: ParrentRef.current, start: "top bottom", // markers:true, animation: animation, scrub: 1, }); } }, { dependencies: [CurrentProject], scope: ParrentRef, revertOnUpdate: true } );

Hi there, pretty new to GSAP - loving it so far! 🤠 I am trying to combine these two examples, Variable height stacked pinning and Combined lateral sections to achieve an animation where the sections that vary in height are pinned, and where some sections with split content allow overflowing text to be scrolled into view. I've created a minimal demo here - I think the issue is that I'm trying to create nested ScrollTriggers and they're not playing well together / one is overriding the other. Any help / advice on how to achieve this with GSAP would be great! Thanks.

Hi Forum, i'm having troubles refreshing the scrolltriggers in my angular project. So when the site is loaded, everything works fine, but when i resize the video in the container i not perfectly aligned anymore. I've set up a minimal demo on stackblitz: Stackblitz Demo EDITNOTE: changed from codesandbox to stackblitz due to sharing issues see: app/src/pages/home/home.component.ts as you can see, i tried some solutions I found on here the forums like invalidateOnRefresh and ScrollTrigger.refresh(true), but none of these work. Desired behaviour after resize: Actual behaviour after resize: I appreciate any help/hint/idea Thank you!

Hi there, I am really struggling to figure out why this isn't working.... and it's so close I do not want to give up on it. For some reason anytime I tween to 0.5 in the timeline it completely skips over it and goes to 1. This happens when I manually set the value to 0.5 - Even without Labels it refuses to work. I have 3 buttons, so I want them to trigger to 0, 0.5, and 1. Console logging the progress confirms this is where the 2nd button should go. However, it goes to 1 no matter what? Is it rounding up? Testing with 0, 0.33, 0.66 works but that is not the correct position. Thanks in advance for any suggestions.

Hi, I'm quite frustrated, and I might did something wrong with my whole code.. I am trying to make a scrollytelling project, and I wanted to trigger certain animations by clicking a button, and make all the other elements of the rest of the website appear on the bottom part of the whole page, depending on which button got clicked (2 buttons, you can select from) My problem here is, that you click the button, the whole thing doesn't fire directly 1. you need to be at the very end of the document, which makes sense to me, but the bigger issue here:, 2. if you wait more than 3 sec before you click on one of the buttons, the whole thing doesn't animate, it just appears. 3. I thought, I could make the other elements appear, by clicking the button, so by scrolling it behaves like the things before. Instead, it just fires everything at once. Or animate it without the need of scrolling. I tried to use only gsap.to();, but the problem here is, that it doesn't revert by scrubbing. Also by defining the ScrollTrigger with the scrubbing, it doesn't make any difference, which value I use and the markers don't show up either..

I keep getting this error when I scroll past a section on a page that uses ScrollTrigger and MagicPin() and then go to another page and then hit the back button. "ScrollTrigger.js:1384 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'pin')". See the code for the component below. I keep doing console.log, but I can't figure out why the pin parameter is still undefined and it only happens when using the back button. I added "await" to it in "async" and everything. import {Component} from 'bona'; import gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; import {magicSlideElementAppear} from '../lib/transitions'; import Swiper from 'swiper'; import {Autoplay, Navigation} from 'swiper/modules'; export default class Worth extends Component { constructor() { super(...arguments); this.header = this.el.querySelector('.worth-header'); this.action = this.el.querySelector('.worth-action'); this.carousel = this.el.querySelector('.worth-carousel'); this.items = this.el.querySelector('.worth-items'); this.item = this.el.querySelectorAll('.worth-item'); this.main = this.el.querySelector('.worth'); this.mm = gsap.matchMedia(); } async onInit() { await this.magicPin(); this.magicShow(); this.initCarousel(); } async onDestroy() { this.mm.kill(true); } magicPin() { ScrollTrigger.matchMedia({ '(min-width:768px)': () => { ScrollTrigger.create({ trigger: this.main, pin: true, pinSpacing: false, }); }, }); } initCarousel() { this.mm.add('(min-width: 768px)', () => { this.worthCarousel = new Swiper(this.carousel, { modules: [Autoplay], wrapperClass: 'worth-items', slideClass: 'worth-item', slidesPerView: 'auto', speed: 8500, loop: true, allowTouchMove: false, autoplay: { delay: 0, disableOnInteraction: false } }); return () => this.worthCarousel.destroy(true, true); }); } magicShow() { if (this.header) magicSlideElementAppear(this.header); if (this.action) magicSlideElementAppear(this.action); if (this.carousel) magicSlideElementAppear(this.carousel); } }

Hi, I am just starting on gsap from last few weeks. I have a simple animation, I am trying to figure out from last few days. I have a circle and dots on the circle radius. Requirement is to scale the dots when the screen enters the section and when the user scrolls each dot should get a border indicating different content (which means a text change and image change). The issue I am facing is the borders around circle are able to appear correctly when scrolling down. But when scrolling up, the borders around the dots are not disappearing correctly. Only 3 dots out of 5 disappear when it reaches the first content, where 4 should disappear. I am not sure if I am having the right approach. Any help in the right directly is greatly appreciated. thanks in advance! Codepen attached.

Hello, I'm looking to use the Next and Previous buttons to scroll to the Next and Previous .desktopContentSection element. In the codepen, I have the Next button linked to #green and Previous buttons hard coded to #red to demonstrate the behavior, however after the element has scrolled to #green, if the Next button is clicked again the user is scrolled to #pink and then #blue. I'm thinking I would need to utilize Observer, but i'm struggling looking for an example I can adjust for my needs. Any assistance is very much appreciated, please let me know if you need anything from me. Thank you!

Hello everyone, I've been learning a lot from all of you, and I truly appreciate it. Currently, I'm working on an animation project, and it's about 90% complete. However, I'm encountering three main issues that I'm struggling to resolve. Firstly, I need each heading to snap to the center before scrolling it up. Secondly, I want the headings to be closer to each other. At the moment, there's a significant amount of white space between them during scrolling. Lastly, I'd like to slow down the scroll speed. Currently, when I scroll too fast, the headings come and go in a flash. I've tried various approaches to address these problems, but I'm still having trouble achieving the final animation effect. Any guidance or suggestions would be greatly appreciated. Thank you!

Hello everyone, I've tried to fix the navigation bar, but it works not fine; what should I change to make it visible when the first section is in the viewport more than 90% and unfix it when the last section is strolled more than 10% down? It should refresh when we get back to the container. Here is my code for this: const tlfour = gsap.timeline({ scrollTrigger: { trigger: ".carousel-inner", start: "top-=100px", end: "0", marker: true, toggleActions: "play none none reverse", endTrigger: panels[panels.length - 1] } }); tlfour.to(".carousel-navigation", { position: "sticky", bottom: 100 });

Dear Support, We are developing a website that has Scroll Smoother applied on the whole page with multiple scrolltriggers applied. We use normalizescroll(true) globally on all pages so that it follows scroll correctly (Android and IOS). But this options breaks the <a href> elements on touch hold event. Specifically on mobile devices when you hold a <a> element it fires the click event. When we disable normalizescroll it doesnt fire the click event when you hold a <a> element. We created a small codepen to recreate the issue. Please visit it from mobile devide(preferably Android with Chrome). We have fully updated softwares.

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

Hello and thank you for your amazing work I have to animate an element with scrollTriggers. The entrance animation (when the element enters the viewport from the bottom) is not scrubbed, but the leaving animation (when the element leaves the viewport by the top) is scrubbed. On the demo I provided, you can see that the red square is visible at the beginning, but I want it to be at opacity = 0. Once you scroll to the starting point and go back, the square successfully disappear and everything is as I want it to be even if you scroll up and down. Why is it visible at the begining and how to fix it ? Thank you

Hello developer, hope you all are doing well. I want my svg to start from the center of the screen, keep animating at the center of the screen and end its animation at the center of the screen. for now, I am using an SVG and keep its height 0 and then it animates to its full height. I am using it for my timeline project but the line starts normally then moves away from the center and speeds up and leaves the screen to the bottom.

Hello! I think I got trouble understanding how should I use GSAP in my Next.js project, in particular, ScrollTriggers, how to initialize and kill them on resize and pathname change. Let me share you my component (it's a Prismic slice in case you wonder about the syntax). I removed some parts which are irrelevant. The aim of this code is to pin the smaller "intro" div, until we scroll through the whole container. Then it sticks to the bottom of it. This code actually works, but I've got a couple problems with it. 1. Resizing works really slow. It feels like a lot of stuff is happening in the background and it feels wrong. But it still kinda works. 2. Second issue is major and it's blocking me from going further. The line that kills ScrollTriggers applies to all the ScrollTriggers across the projects, including those from other components! How should I set it up properly? I will appreciate any advice! 'use client'; import { useRef } from 'react'; import gsap from 'gsap'; import ScrollTrigger from 'gsap/dist/ScrollTrigger'; import { useGSAP } from '@gsap/react'; const Values = ({ slice }: ValuesProps): JSX.Element => { const container = useRef<HTMLDivElement>(null); const intro = useRef<HTMLDivElement>(null); const setupSTs = (offset: number) => { // I don't need a pin on mobile screens <= 768 if (window.innerWidth > 768) { ScrollTrigger.create({ trigger: container.current, start: 'top top', end: `bottom bottom-=${offset}`, pin: intro.current, }); } }; const initSTs = () => { // This line breaks my other components, but if I disable it, resizing for this component doesn't work anymore ScrollTrigger.getAll().forEach((ST) => ST.kill()); if (intro.current) { let introHeight = intro.current.clientHeight; let offset = window.innerHeight - introHeight; setupSTs(offset); } }; // Is it a correct use of useGSAP? useGSAP( () => { gsap.registerPlugin(ScrollTrigger); initSTs(); ScrollTrigger.addEventListener('refreshInit', initSTs); }, { scope: container } ); return ( <section ref={container} > <div className={styles.values__wrapper}> <div ref={intro} className={styles.values__intro}> (...) </div> <div className={styles.values__container}> (...) </div> </div> </section> ); }; export default Values;

Hi GSAP Team, I have a requirement to create two timelines on the same object, my problem now is the animation looks jumpy when scroll fast (I think its because immediateRender: false) and also I think using "x" and "y" to moving the object is not a good approach. And I think I don't need "pin" for this requirement. Would you mind giving me the best approach for this condition? Hope you guys undertand what I need

Hello, I need a banner like in the following example: https://www.moxionpower.com/industries/ It should work without jQuery and should use only the Gsap library.

First of all, the work you have put into this masterpiece and the dedication you guys have! Hats off! Coming to my issue, I am relatively new to React/ React router. I have gone through most of the articles in the forum regarding pinning/ ScrollTrigger/ Router navigation and many more and yet fail to understand what is it that I am doing wrong. In my actual project, there are multiple components, each having their different animations. My homepage works flawlessly, the issue arises when I navigate to a different page and return to my homepage. Now I have read tons of articles stating to call ScrollTrigger.refresh() or ScrollTrigger.update() but it does not seem to work. I am using the latest version of GSAP and react router 6.22. StackBlitz link: https://stackblitz.com/edit/vitejs-vite-kdw52g?file=src%2FApp.jsx Any help is appreciated! You all are anyway appreciated Thank you.

I have a number of sections with a ScrollTrigger and fromTo animation that changes the background-color from red to blue during scroll (scrub). The first section is located at the top of the viewport and starts with a purple color instead of red like the others below, as expected. Is it possible to let the user see the animation from red to purple (before scrolling) on the sections that starts fully or partially visible?

hello, I've been working on react project, The issue is the 'end' property on scrollTigger does not change when the state changes. How can I solve this ? thankyou here is the code: useGSAP( () => { gsap.registerPlugin(ScrollTrigger); const tl = gsap.timeline({ scrollTrigger: { trigger: '.daily-wrapper', scrub: true, start: 'bottom 34%', end: 'bottom 5%', pin: '.info-text', markers: { startColor: 'purple', endColor: 'green', fontSize: '2rem', }, }, }); tl.to('.info-text', { x: -400, // y: -50, duration: 5, onComplete: () => { // poinRef.current.style.backgroundColor = 'red'; console.log('finish'); }, // onUpdate: () => { // poinRef.current.style.backgroundColor = 'white'; // }, }); gsap.to('.daily-wrapper', { scrollTrigger: { trigger: '.daily-wrapper', scrub: true, start: '280px 40%', end: `${1700 + sizeChange}px 5%`, pin: '.info-text', markers: { startColor: 'blue', endColor: 'orange', fontSize: '1rem', }, }, }); }, { dependencies: [sizeChange] } );

Hello everyone, I'm currently learning ScrollTrigger to replicate thescroll animation showcased on: https://olio-midnight.framer.website/ The one where the image transitions over the title while the title subtly scales down. Here's my progress so far on CodePen: https://codepen.io/headlessNode/pen/vYMEzxw While the animation is taking shape, I've encountered an issue with whitespace at the end when manipulating the Y value of the image. I've attempted to adjust the hero's height via ScrollTrigger, but it's resulting in an undesired effect where the height reduces and then reverts to its original state upon animation completion. I could use some guidance on which properties to modify or utilize to achieve the seamless transition seen on the referenced website. Any assistance you can provide would be greatly appreciated. Thank you for your time and expertise.

I hope you are doing well! I'm new with GSAP and I'm having a lot of problems with a complex animation. I tried to create a codepen as simple as possible so you can see what's going on, sorry if it's not very simple. Basically, I'm trying to make an animation like the one used in https://www.revolut.com/ but I can't get it to work, I think I improved the logic of the approach but there is something that keeps making it jump when adding or removing classes. If you need more context or whatever let me know. Thank you very much for your time.

Hello everyone, I have a task to create a banner like next: https://www.moxionpower.com/industries/ I've tried, but it isn't work fine.

Hi there, I'm working on creating an accordion that should function with both scrollTrigger and click functionality. I've attached an example that expands the accordion on scroll, but I'm unsure how to implement the click functionality to open it as well. Let me know if you can provide any help! Thanks