Search the Community

I’m using GSAP with ScrollTrigger to pin a section and animate its content out (moving headings upward and fading them out). I’m working with GSAP and ScrollTrigger to create a scroll-based animation where elements inside a pinned section are progressively moved/hidden. The goal is: Pin a section (#div1) Animate headings out (move up / fade out) (#heading1, #heading2) Naturally reduce the section height of the pinned section as content disappears However, the issue I’m facing is: When the section is pinned, its height seems to be locked, and even after I move elements out of view (using negative margins and opacity), the section does not shrink. This results in extra empty space inside the section but after the content of that section. What I’m trying to achieve As elements are removed/moved out, I want the parent section (#div1) to shrink accordingly The next section (#div2) should move up naturally without gaps What I’ve noticed With pin: true, ScrollTrigger seems to maintain the original height Even if content (#heading1) visually disappears, the layout space remains If I disable pinSpacing, the next section gets hidden underneath the pinned section Additional Issue I also tried manually reducing the height of #div1 while the animations are happening (based on the amount of content being removed). However, when I reduce the height dynamically, it creates a blank space between #div1 and #div2 So I end up with: Either extra space (default pin behavior) Or layout gaps when manually adjusting height What is the recommended approach to: Dynamically reduce the height of a pinned section based on content changes Avoid extra spacing caused by pinning Keep the layout behaving naturally with following sections

Hi, I am working on this idea of scrolling through sections with SVG's. Those SVG's have layers that I animate with ScrollTrigger. There are 3 sections 'Hero scene', 'City scene' and 'New section' (in the future there might be more sections). At the moment I am a bit stuck on how to continue, specifically how to transtition from the 'City scene' to the 'New section'. Preferably I have the City pinned/snapped so that those layers will go down where then the layers from the 'New section' will animate from underneath. Basically how the hero transitions into the city. Also I am not sure if this is the right way of doing this. It could be that I need to change the way I have setup those sections and that there is a better way and more scalable way when adding more sections that flow into one another. If there's someone who can help me get into the right direction it would be much appreciated! PS If needed, I can transfer my example codepen to stackblitz (https://stackblitz.com/@gsap-dev/collections). Because those SVG's are pretty large and I can imagine for readability it would be easier. Greetings, Mark For a better view I recommend viewing the 'Full Page View' as it is not optimized for smaller screen sizes ----

Hey, I'm trying to apply a zoom masking effect where, as I scroll down, the text scales up. But when I scroll back up quickly, the masking doesn't align properly with the scroll speed.

There's this extra space below the section even though i have given the section 680px of height.. and also at the end of this sectiona massive space is coming even though i never added it?.. heres the code "use client" import React, { useEffect, useRef } from 'react' import gsap from 'gsap' import { ScrollTrigger } from 'gsap/dist/ScrollTrigger' const steps = [ { id: 1, number: '1', title: 'Initial Discovery & Research', desc: 'We begin by aligning your goals with market research to validate and shape ideas.' }, { id: 2, number: '2', title: 'Brainstorming & Idea Generation', desc: 'We collaborate through brainstorming to spark innovation and explore diverse ideas.' }, { id: 3, number: '3', title: 'Idea Screening & Selection', desc: 'We filter ideas by feasibility, goals, and market fit to focus on those with the highest potential.' }, { id: 4, number: '4', title: 'User Persona Development', desc: 'We craft user personas to tailor concepts around real needs, behaviours, and pain points for user-centric solutions.' }, { id: 5, number: '5', title: 'Feasibility Study & Risk Assessment', desc: 'We assess feasibility and risks to build a strong, strategic foundation for product development.' }, { id: 6, number: '6', title: 'Prototyping & Concept Visualization', desc: 'We create prototypes and wireframes to visualize ideas, refine concepts, and gather stakeholder feedback.' }, { id: 7, number: '7', title: 'Feedback & Iteration', desc: 'We gather feedback to refine prototypes, ensuring concepts meet user needs and market expectations.' }, { id: 8, number: '8', title: 'Defining the Product Roadmap', desc: 'We design a product roadmap that defines timelines, milestones, and goals to guide development.' }, { id: 9, number: '9', title: 'Final Concept Approval', desc: 'The process ends with final concept approval, aligning all stakeholders for development.' } ] function ProductSuccess() { const sectionRef = useRef<HTMLDivElement | null>(null) const cardsContainerRef = useRef<HTMLDivElement | null>(null) const cardRefs = useRef<Array<HTMLDivElement | null>>([]) useEffect(() => { gsap.registerPlugin(ScrollTrigger) // Offset to leave space for fixed navbar (adjust if navbar height changes) const NAV_OFFSET_PX = -45 const section = sectionRef.current const cardsContainer = cardsContainerRef.current const cards = cardRefs.current if (!section || !cardsContainer || cards.length === 0) return // Calculate card height + gap const cardHeight = cards[0]?.offsetHeight || 0 const gap = 16 // mb-4 = 16px const totalCardHeight = cardHeight + gap // Set initial positions - all cards stacked below the viewport cards.forEach((card, index) => { if (index === 0) { gsap.set(card, { y: 0 }) } else { // Position each card below the previous one gsap.set(card, { y: totalCardHeight * index }) } }) // Create timeline for the animation const tl = gsap.timeline({ scrollTrigger: { trigger: section, // start when section hits just below navbar start: `top+=${NAV_OFFSET_PX} top`, end: () => `+=${totalCardHeight * (cards.length - 1) + window.innerHeight}`, scrub: 0.5, pin: true, anticipatePin: 1, } }) // Animate each card group cards.forEach((card, index) => { if (index > 0) { // Move all cards from current index onwards up by one card height const cardsToMove = cards.slice(index) tl.to(cardsToMove, { y: (cardIndex) => { const originalIndex = index + cardIndex const newPosition = totalCardHeight * (originalIndex - index) return newPosition }, duration: 1, ease: "none", stagger: 0 }, index === 1 ? 0 : ">") } }) return () => { ScrollTrigger.getAll().forEach(trigger => trigger.kill()) } }, []) return ( <section ref={sectionRef} className="w-full bg-white py-12 md:py-16 lg:py-20 h-[680px] overflow-hidden"> <div className="max-w-7xl mx-auto px-4 lg:px-0"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-start"> {/* Left: Heading + paragraph (pinned) */} <div className="flex flex-col justify-start lg:sticky lg:top-0"> <h2 className="font-['Inter'] font-semibold text-[28px] md:text-[32px] lg:text-[36px] leading-[120%] text-[#000000] max-w-[550px]"> From Vision to Reality: Our Proven Path to Product Success </h2> <p className="mt-4 md:mt-8 font-['Inter'] font-normal text-[16px] leading-[24px] text-[#00000066] max-w-xl"> Our product ideation and conceptualization is a step-by-step journey from brainstorming and research to prototyping and refinement. We then craft a strategic roadmap to guide your concept into development, ensuring every decision aligns with your vision. </p> </div> {/* Right: Steps list with animation */} <div className="w-full relative"> <div ref={cardsContainerRef} className="relative h-[200px]"> <div className="absolute top-0 left-0 w-full"> {steps.map((s, index) => ( <div key={s.id} ref={el => { cardRefs.current[index] = el }} className="absolute top-0 left-0 w-full" > <div className="flex items-stretch gap-[36px]"> {/* Strip */} <div className="w-[66px] flex flex-col items-center flex-shrink-0 bg-white"> <div className="text-left whitespace-nowrap bg-white font-['Inter'] font-semibold text-[15px] leading-[20px] text-[#000000]"> {`STEP - 0${s.number}`} </div> <div className="flex-1 w-full flex items-start min-h-[120px]"> <div className="mx-auto w-0.5 h-full" style={{ background: 'repeating-linear-gradient(to bottom, #00000033 0px, #00000033 4px, transparent 4px, transparent 6px)' }} /> </div> </div> {/* Card */} <div className="flex-1 mb-4"> <div className="bg-[#FAFAFA] rounded-[12px] p-6"> <div className="flex flex-col items-start"> <div className="w-[48px] h-[48px] rounded-[8px] bg-[#3C82F6] flex items-center justify-center mb-3"> <span className="font-['Inter'] font-bold text-[24px] leading-[24px] text-white">{s.number}</span> </div> <div className="font-['Inter'] font-medium text-[18px] leading-[27px] text-[#0C0C0C]"> {s.title} </div> <div className="mt-1 font-['Inter'] font-normal text-[12px] leading-[20px] text-[#00000066]"> {s.desc} </div> </div> </div> </div> </div> </div> ))} </div> </div> </div> </div> </div> </section> ) } export default ProductSuccess

Sorry for not (yet) having a minimal demo, I hope that someone can point me in the right direction without, but I'm willing to build one if needs be. Also as the my problem ist related to iOS (and iPad OS) I might have to make a video if my explanation doesn't suffice. The situation: I have 6 Sections that fill the Body (minus fixed footer and header) the first is an group picture with transparent divs overlayed that scrollto (gsap.plugin) the related section of the person. Each section has a Timeline with a scrollTrigger with a label dead center. All of that works without a hitch on all desktop-browsers I tested it on. (Including Safari on the Mac.) I also have a onSnapComplete callback that fires an independent animation with a minimal delay. Also working as expected. On the i-devices however the sections tremble for quite a while regardless from of method i reach them. (Normal scrollling or scrollTo.) I have a delay and a duration for snapping, but playing with those didn't help. I tried force3D with false and true to no avail worked autoKill: false into the scrollTo - no dice... (I testet on an iPad Pro 12,9 " 4th gen and a iPhone 12proMax, so hardware speed isn't the likely reason) Here is the temporary linke to the page https://bit.ly/3jSenqy so you can see and compare if you would want to. I do hope that the issue is something that came up before and you can point me in the right direction. Thanks!

I made this animation using Scroll-Trigger. The concept is to scroll normally through the main page until reaching a specific section. This section is pinned, and its subsections are stacked and animated one over the other on scroll. Once the last subsection is reached, the main page continues with normal scrolling. However, when I try to add Scroll-Smoother to the page, the animation doesn't work. I would be grateful if you could help me. Thank you in advance!

Hi, I have a problem with the correct scroll trigger after a section with a horizontal scroll. Text animations load correctly before the horizontal scroll. But the horizontal scroll breaks the start of the text animation under that section. How can I fix this?

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/

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

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/

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.

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!

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!

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.

Hey guys, I need a little help with this one. I want scroll to specific slide by clicking on button but unable to find any way to perform same function. Pls advice. Many thanks

Hello Everyone! I have a bit of a generic problem/misunderstanding - basically, i have some animations in GSAP and have a couple of questions to understand it more deeply: When is the best time to load the GSAP animation (when the document is loaded or when everything is loaded (DOM, images, etc))? The first question leads to this one - if I do a hard refresh in the browser my animations are flashing or for example, the element that should be x: -100% is visible (for literally like 0.00s but still and then animation kicks in so there is a little flash) because the js file is not probably loaded yet - how do you guys tackle this, especially vital animations like for hero section or the other places when we need everything to be loaded and animated ASAP? Please have a look at the code below all bundled by webpack: $(function () { // Hero section animation const heroBanners = document.querySelectorAll(".section__hero-banner"); heroBanners.forEach((section) => { let imgCover = section.querySelector(".img-cover"); let imgTl = gsap.timeline({ scrollTrigger: { trigger: section, // markers: {startColor: "green", endColor: "red", fontSize: "18px", fontWeight: "bold", indent: 20}, start: "top center", }, }); // Inital state for headings imgTl.set(".hero-text__right", {x: "120%"}); imgTl.set(".hero-text__left", {x: "-120%"}); imgTl.to(imgCover, { opacity: 1, ease: "power4.inOut", duration: 0.4, }); gsap.utils.toArray(section.getElementsByClassName("hero-text")).forEach((heroText, herIdx) => { var container = section.getElementsByClassName("text-wrapper"); let textTl = gsap.timeline({ scrollTrigger: { trigger: section, scrub: 1, // markers: {startColor: "green", endColor: "red", fontSize: "18px", fontWeight: "bold", indent: 20}, start: "top top-=50px", end: "bottom center", // toggleActions: "restart none none reset" }, }); if (herIdx % 2 == 0) { let distance = $(container).width() - $(heroText).width(); //left imgTl.to(heroText, { x: "0%", duration: 0.85, ease: "power4.inOut", }); textTl.to(heroText, { x: `${distance}px`, }); } else { let distance = $(container).width() - $(heroText).width(); //right imgTl.to( heroText, { x: "0%", duration: 0.85, ease: "power4.inOut", delay: -0.85, } ); textTl.to(heroText, { x: `-${distance}px`, }); } }); }); }); The animation is: hero image fade in then slide two lines of text from left and right. Would be amazing he somebody could point out some bad practises or mistakes or if this could be done in better way. thanks you so much guyz!