Search the Community

if (window.innerWidth >= 1280) { gsap.registerPlugin(ScrollTrigger) initGSAPAnimations() window.addEventListener('resize', () => { ScrollTrigger.getAll().forEach(trigger => trigger.kill()) initGSAPAnimations() ScrollTrigger.refresh() }) function initGSAPAnimations() { gsap.to('.hero', { scale: 0.7, scrollTrigger: { trigger: '.two-block', start: 'top-=100 50%', end: 'bottom 100%', scrub: 2, // markers: true, }, }) gsap.from('.box-two-block:nth-child(odd)', { x: 1800, scrollTrigger: { trigger: '.hero', start: 'top start', end: 'bottom-=100 end', scrub: 2, // markers: true, }, }) gsap.from('.box-two-block:nth-child(even)', { x: -1800, scrollTrigger: { trigger: '.hero', start: 'top start', end: 'bottom-=100 end', scrub: 2, // markers: true, }, }) gsap.to('.two-block', { scale: 0.7, scrollTrigger: { trigger: '.about', start: 'top 50%', end: 'bottom 100%', scrub: 2, // markers: true, }, }) gsap.from('.about__video-holder', { scale: 0.5, scrollTrigger: { trigger: '.about', start: 'top-=380 50%', end: 'bottom-=180 100%', scrub: 2, // markers: true, }, }) gsap.from('.about__title-box .title-box__title', { scale: 0.5, scrollTrigger: { trigger: '.about', start: 'top-=380 50%', end: 'bottom-=180 100%', scrub: 2, // markers: true, }, }) gsap.from('.about__title-box .title-box__text-holder', { scale: 0.5, scrollTrigger: { trigger: '.about', start: 'top-=380 50%', end: 'bottom-=180 100%', scrub: 2, // markers: true, }, }) gsap.from('.about__item', { x: 2200, duration: 1.2, stagger: 0.3, ease: 'power3.out', scrollTrigger: { trigger: '.about', start: 'top 20%', end: 'bottom 20%', toggleActions: 'play reverse play reverse', // markers: true, }, }) gsap.to('.about', { scale: 0.7, scrollTrigger: { trigger: '.fixtures', start: 'top 50%', end: 'bottom 100%', scrub: 2, // markers: true, }, }) gsap.from('.fixtures__title-box .title-box__title', { opacity: 0, scrollTrigger: { trigger: '.fixtures', start: 'top-=100 50%', end: 'bottom 100%', scrub: 2, // markers: true, }, }) gsap.from('.fixtures-slider', { x: 1800, scrollTrigger: { trigger: '.fixtures', start: 'top-=150 50%', end: 'bottom-=50 100%', scrub: 2, // markers: true, }, }) gsap.to('.fixtures', { scale: 0.7, scrollTrigger: { trigger: '.services', start: 'top 50%', end: 'bottom 100%', scrub: 2, // markers: true, }, }) gsap.from('.services__title-box .title-box__title', { opacity: 0, scrollTrigger: { trigger: '.services', start: 'top-=250 50%', end: 'bottom-=150 100%', scrub: 2, // markers: true, }, }) gsap.from('.item-services:nth-child(odd)', { x: 1800, opacity: 0, scrollTrigger: { trigger: '.fixtures', start: 'top start', end: 'bottom-=100 end', scrub: 2, // markers: true, }, }) gsap.from('.item-services:nth-child(even)', { x: -1800, opacity: 0, scrollTrigger: { trigger: '.fixtures', start: 'top start', end: 'bottom-=100 end', scrub: 2, // markers: true, }, }) gsap.to('.services', { scale: 0.7, scrollTrigger: { trigger: '.projects', start: 'top 50%', end: 'bottom 100%', scrub: 2, // markers: true, }, }) gsap.from('.projects__title-box .title-box__title', { opacity: 0, scrollTrigger: { trigger: '.projects', start: 'top-=200 50%', end: 'bottom-=850 100%', scrub: 2, // markers: true, }, }) gsap.from('.projects__title-box .title-box__text-holder', { opacity: 0, scrollTrigger: { trigger: '.projects', start: 'top-=200 50%', end: 'bottom-=850 100%', scrub: 2, // markers: true, }, }) gsap.to('.projects', { scale: 0.7, scrollTrigger: { trigger: '.logos', start: 'top 50%', end: 'bottom 100%', scrub: 2, // markers: true, }, }) if (window.innerHeight < 800) { gsap.from('.projects-slide__right-col', { scale: 0.5, scrollTrigger: { trigger: '.projects', start: 'top-=850 50%', end: 'bottom-=880 100%', scrub: 2, // markers: true, }, }) gsap.from('.projects-slide__left-col', { scale: 0.5, scrollTrigger: { trigger: '.projects', start: 'top-=850 50%', end: 'bottom-=880 100%', scrub: 2, // markers: true, }, }) gsap.from('.pagination-projects-slide', { x: 2200, duration: 1.2, stagger: 0.3, ease: 'power3.out', scrollTrigger: { trigger: '.projects-slider', start: 'top+=750 50%', end: 'bottom+=220 100%', toggleActions: 'play none none none', // markers: true, }, }) } else { gsap.from('.projects-slide__right-col', { scale: 0.5, scrollTrigger: { trigger: '.projects', start: 'top-=250 50%', end: 'bottom-=450 100%', scrub: 2, // markers: true, }, }) gsap.from('.projects-slide__left-col', { scale: 0.5, scrollTrigger: { trigger: '.projects', start: 'top-=250 50%', end: 'bottom-=450 100%', scrub: 2, // markers: true, }, }) gsap.from('.pagination-projects-slide', { x: 2200, duration: 1.2, stagger: 0.3, ease: 'power3.out', scrollTrigger: { trigger: '.projects-slider', start: 'top+=250 50%', end: 'bottom+=230 0%', toggleActions: 'play none none none', // markers: true, }, }) } } } Hello, the animation works great, but everything goes wrong when I reduce the zoom of the page or I reduce or increase the width of the browser window and then the animation stops working. I am attaching the code, as well as a demo site where you can see the animation itself and its behavior when changing the width of the browser window. When scrolling down, my section should shrink using scale. But after changing the screen width, something strange happens. Please help solve this issue. Project download — https://github.com/denys-khrapov/babolar Demo link — https://denys-khrapov.github.io/babolar/

hello, I have a problem with a scroll trigger with a pin for two sections, the goal is to pin the first one, scroll to pin the second, and scroll to the bottom of the page. I tried a lot of different things, with anticipate pin, trigger, and change the start and end of the trigger, but nothing looks ok, a little 'jump' appears between the different pin. Actually, the trigger is on the parent of the 2 sections , and in the same timeline, but i don't know how to fix it.. I attached a video and the code i used. Thanks for the response :) Enregistrement de l’écran 2025-01-03 à 14.mp4

Hi Guys, Iam getting issue while scrolling the timeline to particular section or progress over button click while using scroll trigger in timeline. I have tried with scroll progress but its not working any help or suggestion will be very helpful.

I’m trying to set up an animation for a pinned container. Everything seems to work, but I can’t figure out why I need to set the section height to 100vh more than the height of all the scrollable elements combined. Am I doing something wrong? https://codepen.io/mikhail21990/pen/LEPyrjO

I have a problem with the z-index of the footer in animations created with pinned sections. What I want to do is to make the footer clickable. I couldn't find a solution for this. Could you please help me?

I’m trying to replicate the scroll animation in the Services section of Webisoft's website, using Lenis and ScrollTrigger. However, I can’t achieve the effect where the top part of each section remains partially stacked as you scroll. Here’s my CodePen link: https://codepen.io/Miffy402/pen/mdNLBBq. Any advice or tips would be greatly appreciated!

Hi Team, 1. When I come to the fact and figure section in the viewport at the top of the page, only the body should be hidden, and the animation should complete and move to the next. The problem I'm facing is that when the fact and figure section comes to the viewport even 10% , the body is hidden, and also scrolling up and down is not proper. 2. I need animation from bottom to top as I attached the video for refers Thanks in advance. sr (1).mov

hey guys, im trying to recreate this text moving effect from https://clingr.me/ (on third section), there is also a fixed background image scaling effect , i thing im almost done, but its is not smooth at all everything happens so quick, i tried to increasing the end value but not working? https://codepen.io/Rare4pple/pen/eYqREqr?editors=0100

Hi Team Greensock Forums, Great to be back on these forums. Always someone willing to take time out of their day to help you with something you've been banging your head against a wall about for hours haha. I've been having some issues with a fixed element using SmoothScroller and ScrollTrigger. The element itself is an Apply button that is always fixed to the bottom right of the screen. I've put it outside of the main smoothScroller content wrapper to ensure it stays fixed all of the time and is relative to the body. What I'm trying to achieve is the following: Apply button fixed and outside of the main scrollSmoother When the user is, let's say, 150px from the bottom of the scrollable viewport, I want to get it to change to absolute positioning and then it locks to that position and is no longer fixed When the user scrolls back up, it changes back to position fixed and continues to stay fixed as the user scrolls up. Please find a link to a little CodePen I created for anyone who wants to have a crack (https://codepen.io/dayneh88/pen/jOgBmXj) Any help would be greatly appreciated. Thanks again, Dayne

Hi, I'm new to GSAP and having trouble with a specific animation, I made a quick simplified (and ugly) pen to demonstrate the problem. I have two DIV's with separate animation that change on every section, I'm sure there is a cleaner way to do it. Thank in advance.

Hiii, I am trying create a reel like web application. In which I am trying to create a reel component in which I will use Observer for listening user's swipe up and swipe down action and scrollTo to animate slide to next page. But, the issue is when user swipes, onUp/onDown is being called even after user stops swiping. Here paginated api response will come also so we have to update slides as user scrolls the reels. Here is a code for that component: import gsap from 'gsap' import { ScrollToPlugin, Observer, ScrollTrigger } from 'gsap/all' import { useGSAP } from '@gsap/react' import { type VideoSizeBoxType } from '@/lib/stores/genuin-options' import { useEffect, useRef } from 'react' gsap.registerPlugin(ScrollToPlugin, Observer, ScrollTrigger) const customColors = [ '#E74C3C', '#1ABC9C', '#8E44AD', '#3498DB', '#F1C40F', '#2ECC71', '#D35400', '#9B59B6', '#27AE60', '#34495E', ] export function CustomSwiper({ sizeBox }: { sizeBox: VideoSizeBoxType }) { const scopeRef = useRef<HTMLDivElement | null>(null) useGSAP( () => { let isAnimating = false let currentIndex = 0 const obs = Observer.create({ debounce: true, type: 'wheel,touch,pointer,scroll', wheelSpeed: 0, target: '#swiper-test', lockAxis: true, tolerance: 0, preventDefault: true, onDown: (self) => { console.log('self::', isAnimating) if (!isAnimating) { swipeNext(currentIndex + 1) } }, onUp: () => { if (!isAnimating) { swipePrev(currentIndex - 1) } }, }) function swipeNext(newIndex: number) { isAnimating = true gsap.to('#swiper-test', { duration: 0.5, ease: 'power3.inOut', scrollTo: { y: `+=${document.getElementById('swiper-test')!.clientHeight}px` }, onComplete: () => { isAnimating = false currentIndex = newIndex }, }) } function swipePrev(newIndex: number) { isAnimating = true gsap.to('#swiper-test', { duration: 1, scrollTo: { y: `-=${document.getElementById('swiper-test')!.clientHeight}px` }, onComplete: () => { isAnimating = false currentIndex = newIndex }, }) } }, { scope: scopeRef } ) return ( <div ref={scopeRef}> <div id="swiper-test" className="overflow-hidden" style={{ ...sizeBox }}> {customColors.map((item, index) => { return ( <div key={index} className="flex h-full w-full" style={{ backgroundColor: item }}> {index} </div> ) })} </div> </div> ) }

how to create this pinning effect the same as this website https://www.airvoir.com/

i have pin section where underneath of this section slide one by one visible on scroll , issue is when i true pinspacing lots of extra space occur and when i false pinspacing black div section overlap when i scroll on last slide , please help me with this. thanks https://codepen.io/adllikqv-the-typescripter/pen/XWvKjEK

When I scroll the page on Safari iOS I can see a jitter on the page. Not in the animation but the overall page -- the text, etc. I understand that Safari handles scroll differently, but I'm not sure if there's something else I can do to stop it. When I comment out the JavaScript and scroll the page the jitter goes away.

I work on ADHS-Gutachten.de I use scroll triggers to control the ThreeJS scene and the divs and their contents. Everything works very well at first. But: If I use the scroll bar and quickly scroll from top to bottom, various elements stop. I suspect that since the animations are not finished but the user scrolls past the trigger, the information to continue the animation is missing. I use the following code that repeats itself for all elements: With different classes, of course. const tlBackA2 = gsap.timeline({ scrollTrigger: { trigger: ".B", start: "100% 50%", end: "100% 50%", toggleActions: "restart none reverse none", } }); tlBackA2.fromTo(".A2", { y: "0vh" }, { y: "-75vh", duration: 0.5, ease: "power4.inout" } ).delay(0.4); const tlBackA2o = gsap.timeline({ scrollTrigger: { trigger: ".C", start: "100% 50%", end: "100% 50%", toggleActions: "restart none reverse none", } }); tlBackA2o.fromTo(".A2", { y: "-75vh" }, { y: "-150vh", duration: 0.5, ease: "power4.inout" } ).delay(0.4); I need information on how to set the positions of the classes at the beginning or end of each timeline, even if the animation of the timeline and the associated trigger have not yet been completed. The trigger has already run through. Maybe I think too complicated and it is a total beginner problem Can anyone give me a reference to a tutorial or tell me what I have forgotten in this code and what I need to pay attention to? Thanks for your time and help Thom

Hello, I'm encountering an issue with my GSAP/ScrollTrigger animation on Webflow. The glitch seems to be related to DOM changes, likely due to external resources loading after ScrollTrigger has already initialized. I assume ST then wrongly calculates the triggers (start and end) causing the glitch. I've tried using scrollRefresh() and wrapping the entire script in an eventListener for DOMContentLoaded, but the issue persists. 1. Video with the issue: https://youtu.be/_M-Q6dcT9S0 - Funnily the animation works correctly the first time, but on subsequent attempts, a glitch appears. 2. Triggers shift video: https://youtube.com/shorts/fCR3IKiSsQI - With markers turned on, I can see the trigger points shifting while the site is still loading probably causing the glitch 3. Temporary Workaround: As a temporary fix, I set the section meant to be animated to display: hidden until the DOM is fully loaded and then script changes it to the "block". This resolves the glitch, but I believe there should be a better solution how to handles this without a need to hide the entire section. Live URL: Link to one of the talent pages (The issue can be replicated on other talent pages as well). Current Code Snippet: <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script> <script> gsap.registerPlugin(ScrollTrigger); // Wait for the entire window, including images, to be fully loaded window.onload = function () { // Temporary workaround: Make the projectpage-image visible by setting display to block //document.querySelectorAll('.projecttalent').forEach(function(element) { //element.style.display = 'block'; //}); // Create your ScrollTriggers and animations here gsap.from(".projectpage-image", { scale: 0, duration: 3, ease: "power2", scrollTrigger: { trigger: ".talent-work", scrub: 2, start: "bottom +=400", invalidateOnRefresh: true, onEnter: () => { // Attach the scroll event listener when the ScrollTrigger enters the viewport window.addEventListener('scroll', redirectHome); }, // markers: true, }, }); // Call ScrollTrigger.refresh() at the end ScrollTrigger.refresh(); }; let redirectTimeout; const redirectHome = () => { if (window.scrollY + window.innerHeight >= document.body.offsetHeight) { clearTimeout(redirectTimeout); redirectTimeout = setTimeout(() => { window.location.href = '/'; }, 800); } } </script> Webflow Build URL (FF-TALENTs TEMPLATE within CMS collections, code shown above inserted within this page) I would greatly appreciate any advice or solutions, as this is my first experience working with GSAP. Thank you in advance!

Hey there, I have been trying to make something like this codepen, I have managed to do the wipe effects but I wanted it to have that smooth scrolling effect. Issues: changing the srub from true to a certain value e.g (1.2) ruins the effect. also, pinning seems to be not working. I am kinda new to gsap, want some expert eyes to critic the code and maybe help me achieve the effect and optimize the code a bit. thanks.

Hello, first of all I apologize if my English is not very good. I don't write the language fluently This is my first post and I'm new to GSAP. Believe me, I didn't want to post this without trying to solve the animation problem first. I have an animation where, at the starting point, the cards appear stacked one below the other. As you scroll, each card moves up and eventually exits the screen, while the bottom card adjusts to position y:0. The problem arises when the animation is reversed. As shown in the preview, the cards do not return to their correct positions and the animation does not complete as expected. I hope someone can help me with this. Thank you! PD: Reload the page if the animation doesn't work as expected, I don't know what's going on. After reloading, it works fine. PREVIEW: https://stackblitz.com/edit/gsap-react-basic-f48716-vwwr1u?file=src%2FApp.js

Hi, I'm working on a website where a large image scales as you scroll. At page load, I want the image to start at 20% scale and be positioned higher on the y-axis so that it's visible in the viewport. While the setup mostly works, I've encountered an issue: when I apply a negative y-position, the scaling no longer happens from the center. https://codepen.io/remcovb/pen/eYwvGqb However, when I remove the negative y-position, the scaling works correctly from the center, but then the image isn't in the viewport anymore. https://codepen.io/remcovb/pen/bGPqoyo Any advice on how to maintain centered scaling while keeping the image in the viewport? Thanks in advance!

Hello everyone, I'm trying to do this effect (the one with the four cards): https://www.botify.com/ I'm having trouble and need some advice to succeed. Thank you for your help

const BringSection = () => { const rightRef = useRef(null); const sectionRef = useRef(null); useEffect(() => { gsap.registerPlugin(ScrollTrigger); const ctx = gsap.context(() => { gsap.fromTo( sectionRef.current, { y: 200, opacity: 0, }, { y: 0, scale: 1, opacity: 1, duration: 1, scrollTrigger: { trigger: sectionRef.current, start: "top bottom", end: "top center", markers: true, }, } ); ScrollTrigger.create({ trigger: ".gallery", start: "top top", end: "bottom bottom", pin: rightRef.current, markers: true, }); }); return () => ctx.revert(); }, []); return ( <section ref={sectionRef} className="bg-gray-300 rounded-[4rem] section-reveal" > <div className="gallery"> <div ref={rightRef} className="right"> <div className="photos"> <div className="photo red"></div> <div className="photo green"></div> <div className="photo blue"></div> </div> </div> <div className="left"> <div className="detailsWrapper"> <div className="details"> <div className="headline red"></div> <div className="text"></div> <div className="text"></div> <div className="text"></div> <div className="text"></div> </div> <div className="details"> <div className="headline green"></div> <div className="text"></div> <div className="text"></div> <div className="text"></div> <div className="text"></div> </div> <div className="details"> <div className="headline blue"></div> <div className="text"></div> <div className="text"></div> <div className="text"></div> <div className="text"></div> </div> </div> </div> </div> </section> ); }; export default BringSection;

I’ve created four cloud images (cloud1 to 4.png) and want to animate them to smoothly zoom out upon scrolling. Let me know the best way to achieve smooth scrolling. I’ll showcase a character when the clouds have nearly zoomed out completely.

Hello there, I would like to make a slider at the same time as a pinned element so that scrolling is possible only after all slides have been scrolled. Please, look at the example i have prepared. I've made a slider that work, but so many bugs there Could you please help me to find a better way to solve my problem?

I've created a scrolling container inside of the section. And it works just fine until I got to the next-prev buttons. The issue here is that scrollTo miscalculates the scroll position and sections become stuck in between. I've tried everything passing ids, scroll values, elements, even add fixed value on scroll (e.g. 200px). But no help. Help me please I've killed so much time trying to fix this bug. Here is my codepen. You can scroll down to section #3, and then play with buttons. https://codepen.io/pshechko/pen/gOJvyNq

I'm trying to implement a GSAP timeline with Locomotive Scroll beta to pin an element while scrolling in a Next.js component. The code works perfectly in a normal HTML and JS environment, but it's not functioning as expected in Next.js. Here is the minimal demo with normal html environment: https://codesandbox.io/p/sandbox/gsap-timeline-forked-3dqjgv?file=%2Fsrc%2Findex.js%3A8%2C18 Here is the Next Js version: https://codesandbox.io/p/devbox/c4cq6q?file=%2Fpin-element%2Fsrc%2Fapp%2FPinComponent.js%3A28%2C11 I'm new to GSAP and I'm looking for assistance to fix the issue.