Search the Community

Hi, i created a code that have card stack animation and anchor link. The animation when scroll to through manually or anchor link have no problem. However after clicking an anchor link and when i try to scroll back up manually. The first section (in this case <div id="link1" class="homeFeature_section homeFeature_section01">) turn blank or white. I cant recreate the situation in codepen but i copy paste the same code above. Can someone help? server.js style.css

Ho installato gsap sul mio sito wordpress con elementor. Solo da iphone, al caricamento della prima sessione mi disabilita tutti i link della pagina, con un refresh il problema si risolve. Da pc e android non ho nessun problema. I plugin che utilizzo sono ScrollTrigger e ScrollTo. Ho installato la verisone 3.12.5. Quale puo essere la risoluzione? -- TRANSLATION -- I installed gsap on my wordpress site with Elementor. Only from iPhone, when loading the first session it disables all the links on the page, with a refresh the problem is solved. From PC and Android I have no problem. The plugins I use are ScrollTrigger and ScrollTo. I installed version 3.12.5. What can be the resolution?

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.

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 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!

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

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

Hi, I'm in the process of building a website where on /work, the user will start scrolling from the bottom of smooth-content(main, in codepen example) I'm using scroolSmoother alongside other GSAP libraries. Guess the code is quite simple—but I'm new to this. I would wanna think that I need to do some kind of "scroll-to-end-of-smooth-content" thing. Not really sure. Looking forward to hearing from you Thanks a lot!

Hello, I'm pretty new at this and this is my first post so I'll try to be as clear as possible but bare with me please. The codepen attached is essentially what I want to do for this site in terms of functionality. I'm struggling with the menu portion because it is a horizontal website and I can't just add the ids to the href. I tried using scrollTo but I haven't had any luck so I'm wondering if someone can help me. The idea is to have the menu flow throughout all the sections in a sticky-like position. When you click on one of the menu links it sends you to the corresponding section regardless of where you are on the website. Right now I'm thinking scrollTo but I'm open to other methods/animations as long as it takes you to the particular sections which is what I can't figure out. I'd appreciate any help. Thanks!

https://canal.luxurycollection.ae/ For example, please look at this site. When you go to it, you will see that when you scroll through the first block an animation (rotate) is triggered for the element on the left until the end of this block. I can also start scrolling in reverse order and the animation will also be triggered back. How can I do this? I tried to do something, but it did not lead to anything :( I would be happy for any help! Whether it's ready-made code or if you can just point me in the right direction by telling me what to use for it. Thanks :)

Hi ! On my portfolio website that I'm building with Nuxt.js, I want that when the user clicks on a project, the page is scrolled until the top of the project image is aligned with the word "Réalisations" - about 250px from the top of the page. I was inspired by this official gsap example : https://codepen.io/GreenSock/pen/LZOMKY As you can see on my website , when you click on the image and the content is scrolled up, the image does not stop at the right place - but in the opposite direction it works correctly.... any idea what may cause this issue ? Thank you for your help ! ScrollTo script triggered when the user click on a project : scrollToRealisation(event) { let target = event.target.closest(".realisation") this.$gsap.to(window, {duration: 0.5, scrollTo: {y: target, offsetY:250}}); }, Here is the whole code of the page component : <template> <div id="realisations"> <div v-for="item in orderRealisations" :key="item.titre" class="realisation"> <figure @click="scrollToRealisation($event)"> <img :src="require('/assets/imgs/projets/'+item.img)" :alt="item.titre"> </figure> <div class="content"> <div class="contentWrapper"> <header> <h3>{{ item.titre }}</h3> <h5 class="client-year">{{ item.client }} - {{ item.annee }}</h5> </header> <p class="description"> {{ item.description }} </p> <footer> <a class="projectLink" :href="item.url" target="_blank">Consulter le site</a> </footer> </div> </div> </div> </div> </template> <script> import realisationData from '~/static/data.json' export default { name: 'realisations', data() { return { sections: [] } }, asyncData ({ params }) { return { realisationData } }, mounted() { this.sections = this.$gsap.utils.toArray('.realisation'); this.animateOnScroll() }, computed: { orderRealisations() { return this.realisationData.sort((a, b) => b.annee.localeCompare(a.annee)); } }, methods: { //ScrollTo scrollToRealisation(event) { let target = event.target.closest(".realisation") this.$gsap.to(window, {duration: 0.5, scrollTo: {y: target, offsetY:250}}); }, animateOnScroll() { const gsap = this.$gsap this.sections.forEach((section) => { let image = section.getElementsByTagName('figure') let content = section.getElementsByClassName('contentWrapper') this.$ScrollTrigger.saveStyles(".realisation figure, .realisation .contentWrapper"); this.$ScrollTrigger.matchMedia({ "(min-width: 769px)": function() { let imageTl = gsap .timeline({ scrollTrigger: { trigger: section, start: 'top 60%', scrub: 2, end: 'bottom 0px', } }) imageTl.addLabel("animationstart") .to(image, {width: '30vw'}) .to(image, {width: '20vw'}) let contentTl = gsap.timeline({ scrollTrigger: { trigger: section, start: 'top 40%', scrub: false, //in: true, //markers: true, end: 'bottom 35%', toggleActions: "play reverse play reverse" } }) contentTl.addLabel("contentanimation") .fromTo(content, {x:-300, opacity:0,}, {x:0, opacity:1 }, '-=0.8') }, // mobile "(max-width: 768px)": function() { let contentMobileTl = gsap.timeline({ scrollTrigger: { trigger: section, start: 'top 40%', scrub: false, //markers: true, end: 'bottom 35%', toggleActions: "play reverse play reverse" } }) contentMobileTl.addLabel("contentanimation") .fromTo(content, {y:-200, marginTop: 0, height: 0, opacity:0,}, {y:0, height: 'auto',marginTop: 20, marginBottom: 40, opacity:1 }, '-=0.8') } }) }) } } } </script> <style lang="scss"> #realisations { padding-bottom: 60vh; padding-top: 225px; @media all and (max-width: 768px) { padding-top: 0; } .realisation { display: flex; margin-bottom: 3em; @media all and (max-width: 768px) { display: block; flex-direction: column; margin-bottom: 1em; } figure { margin: 0; width: 20vw; cursor: pointer; img { width: 100%; box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; } @media all and (max-width: 768px) { width: 100%; } } .content { max-width: 500px; overflow:hidden; margin-left: 40px; @media all and (max-width: 768px) { margin-left: 0; height: auto; } } .contentWrapper { height: 100%; display: flex; flex-direction: column; justify-content: center; flex-wrap: wrap; header { h3, h5 { margin: 0; } h3 { font-size: 1.4em; margin-bottom: 0em; @media all and (max-width: 768px) { font-size: 1em; } } h5 { font-weight: 400; } } p { font-size: 0.9em; line-height: 1.2; } footer { // margin-top: auto; a { color: #fff; text-decoration: underline; font-size: 0.7em; } } } } } </style>

Hello, I'm working on a scroll-based reveal animation using ScrollTrigger, but I have trouble finding the right solution. I created a minimal demo that actually works (with minor issues) and looks the way I want. The problem is that I think my solution is a little bit hacky, and probably there's a better way of doing this. The most obvious clue for me is the 'Screen 3' link at the top left corner. I'm using the ScrollToPlugin to scroll down to an id inside the 3rd screen, but it must be clicked multiple times to reach the actual id when you start at the top. Can you help me with some tips or examples so I can achieve the exact same effect with a better working solution? I read that I shouldn't add default CSS transform properties when working with xPercent animations, but this way sometimes the page loads in with the 'Screen 1' section visible. A negative X transformation on the #content selector would solve this issue, but I can't use that because that would break the GSAP animation. What's the best solution to avoid this behavior? Thanks in advance! Adam P.S. I'm not sure why the snap animation is jumping around and moving backward. I have the same code in my project, and it only happens on CodePen.

Hello everyone and TIA for all your support! I am making a landing page with GSAP, ScrollTo and ScrollTrigger plugins. As you can see from the Codepen, there is a simple scrolling animation with a specific duration on page load. The animation brings the user smoothly from A section to C section. While on Safari and Firefox (Win and Mac), the animation starts smoothly and correctly, on Chrome and Android browsers (Mi Browser in my case) it stops and it doesnt' run but after some seconds. It seems that duration in this case is read by Chrome like a delay and not the duration of the entire animation. The pen on Chrome explain exactly the problem, while on Safari or Firefox is running good. Anyone has an idea how to fix this strange behavior ? Thank you!