Search the Community

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

Hi Guys, Please i need a help. I am currently using the labelToScroll method to calculate the scroll position of a scrollTrigger timeline. Now the issue i am having is that the labelToScroll seems to return a position that's relative to the start of the tween associated with the passed timeline label. I need labelToScroll to work the same way but it should return a position that's relative to the end of the tween associated with the passed timeline label. I don't know if that makes sense. I saw this helper function here but i am not sure on how to modify it to suit my needs. function labelToScroll(timeline, label) { let st = timeline.scrollTrigger; return st.start + (st.end - st.start) * (timeline.labels[label] / timeline.duration()); } Please any help will be appreciated, Thank you

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> ) }

Hello, what I want to do is to perform a scrollto operation according to a certain condition when the page is loaded, but I can only run the scrollto plugin when I add a click event listener to an element, for example. I have stated the part where I am having trouble with the codepen example with a comment line, thank you in advance for your help.

Hi, I am new to GSAP and I would like to implement smooth scrolling in my React project. I have three different sections in my landing page, and as soon as I scroll down, I would to go to my second section(drive). I am using a scroll tracker(handle scroll) to trigger my animation, as soon as I scroll down to a certain point(20 in this case). The code does not seem to work exactly the way I want to, it oscillates when I move from hero section to drive section. I don't understand why, can someone please explain what is wrong with my code?. Please excuse my code format, I am experimenting with GSAP import './landing2.css'; import {delay, motion} from 'framer-motion'; import Img from './Tire-Tracks.png'; import Bike from './bike.jpg'; import Brad_Pitt from './bradpitt.jpg'; import { stagger } from 'framer-motion/dom'; import { useEffect, useRef, useState } from 'react'; import { useScroll } from 'framer-motion'; import { Opacity, X } from '@mui/icons-material'; import { duration } from '@mui/material'; import Bike1 from './bike1.jpg'; import Bike2 from './bike2.jpg'; import Bike3 from './bike3.jpg'; import Bike4 from './bike4.jpg'; import Boike from './boike3.jpg'; import Keys from './keys.jpg'; import gsap from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger"; import { ScrollToPlugin } from 'gsap/dist/ScrollToPlugin'; import { Tween } from 'gsap/gsap-core'; gsap.registerPlugin(ScrollTrigger,ScrollToPlugin); export default function Landing() { const [state1,updatestate1]=useState(0); const [scrollPosition, setScrollPosition] = useState(0); const scrollRef = useRef(); var oldvalue=20; var section_one=true; var section_two=false; var section_three=false; const handleScroll = () => { const position = window.scrollY; // if(position>oldvalue) // { // gsap.to(".section2",{top:"-730",duration:1.2,ease:"circ.in",scrollTrigger:{target:".section2"}}) // } console.log(position,oldvalue); if(position>oldvalue&&section_two==false) { gsap.to(window, { duration: 0.5, scrollTo: 900}); section_two=true; section_one=false; } if(position<oldvalue&&section_two==true) { gsap.to(window, { duration: 0.5, scrollTo: -900}); section_one=true; section_two=false; } setScrollPosition(position); // if(position<oldvalue) // { // gsap.to(".section2",{top:"0",duration:1.2,ease:"circ.in",scrollTrigger:{target:".section2"}}) // } oldvalue=position; }; useEffect(()=>{ scrollRef.current = handleScroll; window.addEventListener('scroll', scrollRef.current); gsap.to(".drive>img",{clipPath:"polygon(100% 0%,0% 0%,0% 100%,100% 100%)",duration:1,ease:"power4.inOut",stagger:0.25,delay:0.4,scrollTrigger:{target:".drive"}}); gsap.to(".drive",{scale:1.25,duration:3,ease:"power3.inOut",delay:0.4,scrollTrigger:{target:".drive"}}); gsap.to(".imagecontainer",{clipPath:"polygon(100% 0%,0% 0%,0% 100%,100% 100%)",scale:1.06,duration:3,ease:"power4.inOut",scrollTrigger:{target:".midnight"}}); return () => { window.removeEventListener('scroll', scrollRef.current); }; },[]); const ref1=useRef(null); const dukie= { roll:{x:"-118.5%"}, roll1:{x:"-128.5%"} } const variants={ open:{x:"-300%"}, closed:{x:0}, open1:{x:"-150%"}, closed1:{x:0} } const smallscrollvariants={ roll:{x:"-200%"}, roll1:{x:"-200%"} } const child={ transition:{staggerChildren:50.2} } const varianting={ duke:{Opacity:1,y:"-20%"} } return ( <div> <div className='hero'> <motion.div animate="transition" variants={child}> <motion.h1 className='parallelax' animate={"roll"} variants={dukie} transition={{ repeat: Infinity, duration: 45 }}>THIS IS YOUR LIFE AND IT IS ENDING ONE MINUTE AT A TIME</motion.h1> </motion.div> <motion.div className='smallscroll' variants={smallscrollvariants} animate={"roll"} transition={{repeat:Infinity, duration:30}}> <h1>adventurer</h1> <h1>dirt bikes</h1> <h1>motorcycles</h1> <h1>mountain bikes</h1> <h1>chopper</h1> <h1>cruiser</h1> </motion.div> <motion.div className='smallscroll1' variants={smallscrollvariants} animate={"roll1"} transition={{repeat:Infinity, duration:38}}> <h1>adventurer</h1> <h1>dirt bikes</h1> <h1>motorcycles</h1> <h1>mountain bikes</h1> <h1>chopper</h1> <h1>cruiser</h1> </motion.div> </div> <div className='drive1'> <div className='drive'> <img src={Bike1}></img> <img src={Bike2}></img> <img src={Bike3}></img> <img src={Bike4}></img> </div> </div> <div className='midnight'> <div className='imagecontainer'> <img className='boike' src={Boike}></img> </div> <div className='textbox'> <h1 className='shoottothrill'>WHY BUMBLEBEE?</h1> <h1 className='shoottothrill1'>More bang for your buck</h1> <p1 className='shoottothrillpara'>Find deals on all kinds of drives — from the everyday to the extraordinary — complete with a better, more convenient experience versus rental car companies. Find the perfect vehicle for your budget, starting at $25 per day.</p1> <h1 className='shoottothrill2'>Free cancellation</h1> <p1 className='shoottothrillpara1'>Cancel for a full refund up to 24 hours before your trip starts. Because life happens and it helps to be flexible when it does.</p1> <h1 className='shoottothrill3'>Convenient delivery options</h1> <p1 className='shoottothrillpara2'>Get your car delivered right to you or wherever you’re going. Many hosts offer delivery to custom locations or popular points of interest like airports, train stations, and hotels.</p1> </div> </div> <div className='midnight1'> <img className='keys' src={Keys}></img> <div className='textbox1'> <h1 className='dukie'>How BUMBLEBEE WORKS</h1> <h1 className='dukie1'>Find the perfect car</h1> <p1 className='dukiepara'>Enter a location and date and browse thousands of cars shared by local hosts.</p1> <h1 className='dukie2'>Book your trip</h1> <p1 className='dukiepara1'>Book on the Turo app or online, choose a protection plan, and say hi to your host! Cancel for free up to 24 hours before your trip.</p1> <h1 className='dukie3'>Hit the road</h1> <p1 className='dukiepara2'>Have the car delivered or pick it up from your host. Check in with the app, grab the keys, and hit the road!</p1> </div> </div> </div> ) }

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

Hello! I am very, very, very new to GSAP and currently creating my first project with GSAP. However, I am facing a difficulty in animations with iPhone. See, the animation works great on desktop and Android, but on iPhone it somehow... lagging/stuttering. I am also using this code from GreenSock (thank you so much!) with little tweaking. I have also tried using z-index and scaleY but it only makes the animation worse. I am so confused and out of ideas... any idea how to improve the performance on iPhone? Thank you!

Hi There, I have been using GSAP for a while and am comfortable with a lot of the basics but am trying to recreate the scrolling and click interaction effects seen on this page: https://halfof8.com/about You can see that each 'section' is vertically scrollable and then when user gets to bottom of that 'section' the whole section horizontally scrolls over and the next vertical scrollable 'section' starts. This is the biggest issue for me as you can see in the example I provided. I have the vertical scrolling working but you'll see the next 'section' in is not where it is in the example. The example sort of mimics a standard slider/carousel where the next item is queued up to go whereas with scrollTrigger I am stuck with the next section being adjacent to the bottom of the current vertically scrollable section. The other issue I am having is I cannot get scrollTo to scroll to the top of next section, it either scrolls to bottom of current vertical section or over to the correct next section but too far down. Any help would be appreciated, I'm trying to be as clear as possible. My skills may not be quite there or maybe this is something better left for an application outside of GSAP. Thanks for you time.

Hello, I will be much appreciate if someone can help me with this! Since I am not a programmer I have used some help and basic knowledge to achieve the following scrolling effect. https://codepen.io/M-Milde-the-scripter/pen/pomNZeV Basically it start with a image sequence animation, followed by second animation presenting a text with half opacity words, which becomes visible while the user scroll down, and once all the words becomes visible the entire text continue to scroll to reveal the next content. As you can see I am adding some classes on the html element while the user scroll down: - on the header I add .header-active and on the body I add .bg-1 when the first animation ends - and again on the body I add .bg-2 when the second animation ends What I want to achieve is simply to remove those classes in the same order, once the user start to scroll up: - remove the class .bg-2 from the body once the second animation reveals from the t and start to play backwards - remove the class .header-active from the header and .bg-1 from the body, once the firs animation is showing from the top and star to go backwards while the user scrolling up. So the final effect will be when the user scroll back to top the background is again white and the navigation is not visible. on the top example I try with "onReverseComplete", but no success Thank you in advance!

https://codepen.io/GreenSock/pen/LZOMKY I modified the scrollTo example code, but the result did not work as I expected. I added offsetY to scrollTo, the first click works perfectly when the scroll position is less than the element's scroll position. However, if I repeatedly click, the offsetY continues to apply, rather than staying fixed at the desired element and then applying the offset. When the scroll position is greater than the element's position, it cannot scroll to the desired position at all. I expected it to work like box2. Currently, for box2, I am using a fixed y value.

Hey, Im working on a fullscreen slideshow that goes to the next section when i scroll. I created the slideshow first without the slides being position: sticky and this worked perfectly: https://codepen.io/remcovb/pen/wvbaRJe But when added postion: sticky to the sections, the slideshow only works when going down and breaks when going back up: https://codepen.io/remcovb/pen/KKLpbgQ Anyone with a solution for this?

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>

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.

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 have a task to create a banner like next: https://www.moxionpower.com/industries/ I've tried, but it isn't work fine.

i only started using gsap recently, i wanted to use the ScrollTo plugin to animate a horizontal scroll via buttons. but i can't make it work i don't know what the issue is :'(( gsap.registerPlugin(ScrollToPlugin); const avis1 = document.getElementById('avis1'); const avis2 = document.getElementById('avis2'); const avis3 = document.getElementById('avis3'); const b1_2 = document.getElementById('b1_2'); const b2_3 = document.getElementById('b2_3'); const b2_1 = document.getElementById('b2_1'); const b3_2 = document.getElementById('b3_2'); b1_2.addEventListener("click", () => scrollAvis(avis1, avis2)); b2_3.addEventListener("click", () => scrollAvis(avis2, avis3)); b2_1.addEventListener("click", () => scrollAvis(avis2, avis1)); b3_2.addEventListener("click", () => scrollAvis(avis3, avis2)); function scrollAvis(container,targetElement){ // console.log(targetElement.offsetLeft); // console.log(container.offsetLeft); gsap.to( container,{ scrollTo: { x: targetElement }, duration: 0.5, ease: "power3.out" }); // console.log(targetElement.offsetLeft); // console.log(container.offsetLeft); } any kind of help is appreciated

import gsap from "gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; import { ScrollToPlugin } from "gsap/dist/ScrollToPlugin"; gsap.registerPlugin(ScrollTrigger, CustomEase, ScrollToPlugin); let indexToActivate = 0; useEffect(() => { const startScrollSection = document.querySelector(".start-features-section"); const scrollIndicator = scrollSectionIndicator.current; const featuredNodes = Array.from(document.querySelectorAll(".featured")); const featuredIndicators = Array.from(document.querySelectorAll(".features_section_indicator")); // const totalScrollableHeight = 3000; const sectionHeight = totalScrollableHeight / featuredNodes.length; console.log("sectionHeight", sectionHeight); gsap.set(scrollIndicator, { autoAlpha: 0, y: 100, }); ScrollTrigger.create({ trigger: startScrollSection, start: "top top", end: `+=${totalScrollableHeight}px`, scrub: true, pin: true, onUpdate: self => { console.log("self", self); console.log("prev", self.previous()); // const scrollPosition = self.scroll() - self.start; const scrollPosition = totalScrollableHeight * self.progress; console.log("scrollPosition", scrollPosition); if (scrollPosition > 0 && scrollPosition < totalScrollableHeight) { gsap.to(scrollIndicator, { autoAlpha: 1, y: 0, transition: "ease-in-out-cubic", }); } else { gsap.to(scrollIndicator, { autoAlpha: 0, y: 100, transition: "ease-in-out-cubic", }); } indexToActivate = Math.floor(scrollPosition / sectionHeight); indexToActivate = Math.min(Math.max(indexToActivate, 0), featuredNodes.length - 1); console.log("indexToActivate", indexToActivate); // activateCurrentSection(indexToActivate); }, }); function activateNode(indexToActivate, nodeArray, className = "active") { if (indexToActivate >= 0 && indexToActivate < nodeArray.length) { nodeArray.forEach(_node => { _node.classList.remove(className); }); nodeArray[indexToActivate].classList.add(className); } else { console.error("Index out of bounds:", indexToActivate); } } // button indicators function updateActiveFeatureIndicator() { activateNode(indexToActivate, featuredIndicators); } // scroll function updateActiveFeatureSection() { activateNode(indexToActivate, featuredNodes); } // parent function function activateCurrentSection(indexToActivate) { updateActiveFeatureSection(indexToActivate); updateActiveFeatureIndicator(); } function scrollToCurrentSection(index) { indexToActivate = index; // activateCurrentSection(indexToActivate); gsap.to(startScrollSection, { duration: 1, scrollTo: { y: indexToActivate * sectionHeight, autoKill: false, }, ease: "ease-in-out-cubic", }); } // button click featuredIndicators.forEach((numberNode, index) => { numberNode.addEventListener("click", () => { scrollToCurrentSection(index); }); }); }, []); Hello there, need help with a scrollTo issue, please I'm trying to use a scrollTo plugin to scroll to a particular height in my pinned section (startScrollSection) when I click on my (featureIndicator) button and I also expect the scroll to continue from where I clicked correctly instead of starting from scrollPosition: 0

Hello, I'm having some trouble navigating the pinned cards block. In the menu on the left there are anchor links that, when clicked, should scroll to their block. Also, during normal scrolling, links should be marked with an active class when the block becomes visible. Now, when clicked, the link scrolls to the top of the parent block, as far as I understand, because the cards are on top of each other. What is the problem? How can I pin the scroll to the desired block? I used these URLs to implement cards on top of each other and for navigation: https://greensock.com/forums/topic/33597-stacking-cards-overlap/ And https://gsap.com/community/forums/topic/35776-click-to-navigate-to-a-section-using-gsap/ https://codepen.io/Vlanesvit/pen/gOExGzZ

I am trying to achieve this scrolling and band clicking effect: https://root-food.com/ I figured out the horizontal scrolling and band clicking. But both of them together aren't working. What I mean is, when I comment out the update() function, the click events of bands will work just fine and will get the related section into the viewport based on which band you click. Now when we keep the update() function, it won't throw any error and it won't even work. I think both of the scrollTo are conflicting. Please help with this.

Hello, I am creating a multi-panel scrolling widget using the GSAP ScrollTrigger and ScrollTo plugins. When scrolling past the 2nd panel, I use ScrollTrigger to pin an SVG, and ScrollTo to override the snapping behaviour. I'm encountering a slight jump on the initial pinning of my SVG and am not sure what the cause is or how to alternatively smooth this out. My Codepen example isn't too bad, but still noticeable, and if i were to add more content the jump/glitch becomes more prominent. The Codepen example is identical to my project's widget markup and styling. If there are any questions or context needed, I can provide it in this thread. Thanks

Hello. I'm trying add ScrollTo to a child element. when I click a parent element, it works. But when i click Section 2 (id refer to child element), it does not work. How can I solve it?

Hello, I use link anchor in my project to scroll within the page, but when I use the "fadeup" animation in my project, the "anchor" throws the page down a little with an incorrect calculation. can we help?

Hi there I'm using the scrollorama plugin to achieve some fairly simple pinned animations, and the plugin works extremely well. However, I'm trying to use the scrollTo plugin to provide a simple navigation for users to scroll with animation to the critical point in each animation, and this is the part I'm stuck on. If anyone can provide any guidance on how to determine the way to scroll directly to a certain point in a pinned animation, I'd greatly appreciate it! Thanks.

Hi folks, I'd like to control the scroll behavior by forcing it to scroll to the next section. I've tried to follow this example https://codepen.io/GreenSock/pen/NWxNEwY but my pen isn't working. It is stuck to the first section. Do you have any idea why that's happening? Here is my demo: https://codepen.io/maqquo91/pen/LYBNovZ Thanks in advance

I have a horizontal webpage and I wanted to implement a rowjumper. However, gsap.scrollTo() doesn't seem to work together with ScrollTrigger on a horizontal webpage. Does anyone know how I can implement this rowjumper? I'm happy about any help