Search the Community

Hi Everyone. Greetings from Perú. I'm stuck with this functionality and I come here for your help. I will try to explain: I have a main section pinned with scrollTrigger and inner it I have a "slider" with multiple items and dot navigation. This slider should change its items while make scroll. Then when is mobile view the slider move his items horizontal and when is desktop the items movement is vertical. Also, the dot navigation should be updated with every item showed. ---- I try to use scrollTrigger in every item but I don't have good results as you can see in the codepen attached. I attached images for reference. I hope you can help me. Thanks for your attention. Have a nice day!!

Hi all., Great day. When we're using the smooth scroll script the functionality is not working fine as we expected. As per your demo in codepen (https://codepen.io/GreenSock/pen/KKXZOyZ), we tried to include the height with a static value like (height: 9000px;) reference - https://prnt.sc/6K97ufrgm4CE . Shortvideos reference, https://recordit.co/hdjCQztnJM and https://recordit.co/3At0AA5qWD Unfortunately, we can't include the constant value here, the height will differ for each page. So, we tried to get the entire body height from the script. We haven't got any luck on this. Now, we are facing the height calculation methods only. So, anyone please help us to complete this without calculating the height? Thanks in advance

Hi i have a code from pen but i dont know how to move to next section 3 without create more spacing below section 2 ??

"Hello, friends. I have a project and they sent me a link. They want me to create an animation similar to the one in the provided link. In short, there are 4-5 nested images within a container. As you scroll, these images will gradually enlarge and fade away towards the right and left corners. Or is there a similar example available? I would like to demonstrate it with a video. The link is here: https://s2.dosya.tc/server24/4mctr6/WhatsApp_Video_2023-05-08_at_11.50.58.mp4.html"

Hello, I want to merge squares when user scrolls down - red square must take blue squares position, width, height and rotation smoothly and then will disappear imperceptibly, blue will take green squares params and so on. How can i do it?

Hello, I added simplebar js to my ongoing project to customize the scrollbar, but there is a conflict. I think the styles come when gsap is disabled, but the simplebar styles do not work when gsap is active. Can you help me?

Hello, I wanted to make a horizontal scroll structure under four headings. And these four titles have their own content and the videos will be side by side and will be horizontal scrolling while scrolling. and when the content content is finished it will move to the next one. I made a script like this but when I get to the title the pin works correctly but the horizontal scroll does not move. can you help me?

I made an animation of horizontal scrolling, it works fine on a computer, it works poorly on mobile phones, when scrolling, it scrolls in one direction to the end, after which it stops animating. let galleryScene = gsap.timeline(); let item = gsap.utils.toArray(".gallery__item"); const galleryTriger = new ScrollTrigger.create({ animation: galleryScene, trigger: ".photo-gallery", start: "top top", end: "+=" + 600, // markers: true, scrub: 1, snap: 1 / (item.length - 1), pin: true, ease: "none", }); function getMoveDistance(){ let move = document.querySelector('.gallery').scrollWidth; let block = document.querySelector('.gallery').offsetWidth ; move = (move - block) * -1; galleryScene.clear(); galleryScene.to(".gallery", 25, {x: move}) } getMoveDistance(); window.addEventListener('resize', getMoveDistance, true);

I'm using scrollTrigger to animate some videos (.mp4) on scroll. Everything seemed to work fine, except that it doesn't seem to work on iOS (I tested on iPhone 11 iOS 16.0 and on iPhone 13 iOS 16.2). In fact, it is as if it didn't load the videos, the space remains empty and obviously the GSAP scrollTrigger animation doesn't start. Did I miss something?

Hi everyone! I'm really enjoying gsap so far, its capabilities are truly spectacular! I'm trying to create an effect of a <div> rotated in the 3d space rotates back to the XY plane while simultaneously slides down to match the position of another <div>. The effect I aim to replicate can be found here, more precisely the image on the computer screen rotating and sliding down. I want to avoid having to use fixed values for the translation and thought about using Flip.fit() for moving the target element into place together with a scrollTrigger. Alas, it seems as if the 3D rotation is not being considered by the function, resulting in an awkward final state for the sliding element. Does anybody have any ideas on what's going wrong and how I could implement this?

Firstly, ❤️ this! Secondly... wish I was better at it I'm using Locomotive scroll and Splitting.js which chunks up my text into spans, ready to animate. Great stuff. Locomotive scroll adds a is-inview class when a div is entering the viewport making it the perfect opportunity to start my GSAP animation so you get a word after a word effect as it enters the viewport. import { gsap } from "gsap"; import { PixiPlugin } from "gsap/PixiPlugin.js"; import { MotionPathPlugin } from "gsap/MotionPathPlugin.js"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); if (document.querySelector("[data-splitting]")){ gsap.from('.is-inview .char', { duration: .5, ease: "power2.out", opacity: 0, y: '50%' , delay: 20, stagger: .005 }) } On page load, Locomotive adds this is-inview class to everything above the fold so the animation above ^ works perfectly, However, GSAP has now run and finished so when I scroll down the page the letters don't animate in one after the other. They are just visible. You can see it's nested above .is-inview .char so whenever .is-inview is applied .char does it's thing - like it does initially on page load. I don't want to repeat (as in once you've scrolled past it, it shouldn't animate out and in again) so the repeat option for GSAP doesn't seem right - do you know how else can I achieve this? I almost need it to keep checking to see if .is-inview is applied and then if it is, run it again to everything that hasn't already run. I just can't get my head around that part 😕 Boooo! I saw a post on here that mentions scrollTrigger but this blows my CPU when I querySelectorAll(".char"). The page might have a lot of these spans. const sections = document.querySelectorAll(".char"); sections.forEach((section) => { gsap.to(section, { scrollTrigger: { trigger: section, markers: true, start: "top center" }, borderTopLeftRadius: 0, borderTopRightRadius: 0, duration: 1 }); }); A h2 on my site when all the JS has compiled for Locomotive & Splitting for example looks like this -if it's any help <h2 class="c-heading -h2 words chars splitting is-inview" data-splitting="" data-scroll="data-scroll" data-scroll-offset="500" style="--word-total:1; --char-total:9;"> <span class="word" data-word="eCommerce" style="--word-index:0;"> <span class="char" data-char="e" style="--char-index:0;">e</span> <span class="char" data-char="C" style="--char-index:1;">C</span> <span class="char" data-char="o" style="--char-index:2;">o</span> <span class="char" data-char="m" style="--char-index:3;">m</span> <span class="char" data-char="m" style="--char-index:4;">m</span> <span class="char" data-char="e" style="--char-index:5;">e</span> <span class="char" data-char="r" style="--char-index:6;">r</span> <span class="char" data-char="c" style="--char-index:7;">c</span> <span class="char" data-char="e" style="--char-index:8;">e</span> </span> </h2> Appreciate any guidance - Thanks!

Hi guys. I am using locomotive scroll and gsap and scrolltiriger in my project. in codepen demo you can see the structure idea that I want to implement in my real project. (a smooth scrolling and a pin section with horizontal scrolling effect) I found out that the desire behavior happens only after an element with class pin-spacer is added to dom. in this demo on code pen after running the project everything work just fine but in my real project(that have this structure but with some photos and iframes and other things) the element with class pin-spacer is added with delay and it causes that the scroll behavior ( section with horizontal scrolling behavior ) not happening after page is loaded and it works after something like 20 seconds. I tried to used gsap and locomotive scroll packaes with npm or cdn or adding <script> directly and none of them solve my problem. could you help me please? how can I make the element pin-spacer added to dom right away? I want horizontal scrolling work when dom is ready

I am trying to use the scrollTrigger plugin while implementing the fix for the safari scroll issue you flag in this article here. When I apply the CSS from this it breaks the pages native scroll and therefore the scrolltrigger doesn't fire. What can I do to resolve this In the section: Stop iOS Safari from resizing the window on scroll body, html { height: 100vh; width: 100vw; overscroll-behavior: none; overflow: hidden !important; } #viewport { position: fixed; overflow-x: hidden; overflow-y: scroll; height: 100vh; width: 100vw; -webkit-overscroll-behavior: none; overscroll-behavior: none; -webkit-overflow-scrolling: touch; } https://greensock.com/docs/v3/HelperFunctions#scrollResize My simple scrollTrigger on the element is just this but it breaks cause the above CSS ScrollTrigger.create({ trigger: '#test', start: 'top top', // endTrigger: '#otherID', end: 'bottom 50%+=100px', onToggle: (self) => console.log('toggled, isActive:', self.isActive), onUpdate: (self) => { console.log( 'progress:', self.progress.toFixed(3), 'direction:', self.direction, 'velocity', self.getVelocity() ); } });

Hello masters, I need help to create an animation like this: https://monosnap.com/file/d9JYlNbcmfA3Zbcn1vwOFoNjM9kCC6 I don't mean marquee text. I mean lines and text which appears on the scroll. Can someone help me to implement that? I will be happy to see any ideas and demos. Regards, Sergey

Hi, I wanted to create a vertical/horizontal scroll but I've meet a problem where when using react 18, project just dont work. Could someone help me fix this issue so I can use react 18? https://codesandbox.io/s/test-forked-i9ng90?file=/src/App.js

Hello, I added lightGallery framework to my gsap project, it works fine, but there is a scroll problem. When I turn off the lightbox, it shifts up and down. How can I prevent this? Can you help me? I guess scroll is not locking

Hi! I was trying to achieve a similar effect to this codepen (found it in the gsap showcase) , but without all the complications of the loop. Most precisely, I was trying to achieve that instant snap effect, but without restarting when the array ends. Something exactly like this. I spent several hours yesterday without catching it, I would really apprec.iate any start point to work arround. Thanks in advance

Hello, I want to reduce the initial section height while scrolling and I do this, but there is a space between the section below it? Can you help?

I wan't to have a google search result page like sticky header animation with gsap, how can i do it.

Hello everyone! I am trying to achieve some type of animation that seems to be a little bit hard to implement for me. I want a user to scroll a page till they reach a desired block (a text block) where only part of it is visible. When block hits top of the viewport it should grow to 100vh and start scrolling to show the content inside. When scrolled to the bottom of text block the page should continue scrolling down. On scrolling up to the page the animation should reverse. I seem to be facing a couple of issues with my current progress: 1. When I scroll to the text block or scroll out of it sometimes it feels like I should scroll one more time or move a cursor to make scroll work. Looks like it's 'focusing on/out " of inner scrollbar. It's very well seen when you scroll with a mouse, not touchpad. 2. When I scroll down the page and start scrolling up if the cursor is hovering over even the smallest part of my text block it starts scrolling it. I would like the block to take the whole screen and only start scrolling after that. I guess I need second scrollTrigger instance for that? Thanks in advance for your help! I am only discovering the world of GSAP, so pardon me if the question is simple. I was searching the forum for quite a while to find something similar and didn't succeed.

Hi, I'm really stressed, I don't know if you can help me. I tried everything but for some reason the menu keeps moving with respect to the size of the window, what can I do? if I disable the trigger the menu does not move, and also the rest of the panels do not move, the only one that changes is the pined one. can you help me

First of all thanks a lot for creating GSAP, it is amazing! I am new to gsap, I am working on a project where i intend to create 6 slides, which are both vertically and horizontally (fake-horizontally) scrollable. but withing one of those slides (2nd slide) I want to implement the below pen! I tried several approaches, but it does not seem to be working, I've been at it from 4 days straight, please help out! Approaches i tried: 1. simply added the code with some minor changes in "start and end positions" [ it did work, but there were 2 different scrollers, and not connected to each other] 2. tried horizontal: true [since it's "fake horizontal" it didn't work either] 3. containerAnimation -> well this almost worked, but "pin : true" cannot be used with containerAnimation. And i want the scroller to stay in view until the animation on 2nd slide is completely finished. any suggestions would be very helpful, thank you very much!

Hello, first of all, the problem is; I am making a project with gsap. I want parallax to work on desktop version and I have succeeded. When the menu opens, I wanted to pause the body scroll, which works successfully. But there was a problem. I can't pause sroll in mobile version because the project is not loaded in GSAP (768px) resolution. I want to pause body scroll in both mobile and desktop versions. I am sharing the code and codepen link with you. Can you help me? console.clear(); gsap.registerPlugin(ScrollTrigger, ScrollSmoother); let smoother; const mm = gsap.matchMedia(); mm.add("(min-width: 768px)", () => { smoother = ScrollSmoother.create({ wrapper: "#smooth-wrapper", content: "#smooth-content", smooth: 1, normalizeScroll: true, ignoreMobileResize: true, effects: true, }); return () => smoother.kill(); });

Hello, I was using parallax in my project but I am using code to turn this feature off for mobile devices. However, when I did this, the parallax visuals became normal as I wanted. But I can't pause body scroll with scrollsmoother in this way. For example, when I open the menu, the page scroll works. I have such a problem, how can I solve it? I share my project link with you; Example https://yeni.dybank.com.tr/ If you try this link on mobile, you will understand more easily what I mean. Thank you so much.

So I am trying to replicate an effect I recently saw (the inspiration for what I am trying to build can be found at the top of the page here) and managed to figure out the endless slider effect (yep, I am definitely far from being a gsap master). But now that I have the endless effect, I want to figure out how they sped up the effect on the users scroll. I linked what I currently have built via CodePen. I found this post that effects the speed of an animation using ScrollTrigger but it was recommended to use the containing div and animate that which doesn't really work for this case, at least I don't think it does but I am open to being wrong. I would appreciate any insight on how one might be able to adjust the slider scroll speed on scroll down. And before I end this, thank you to everyone in the GreenSock team. This library is incredibly powerful and unbelievably helpful. I just wish I would of tested it out sooner.