Pollux Septimus

Hello @GreenSock, Thank you for you replay! I know that ScrollSmoother is easier to work with, but purchasing the GreenSock Club does not make sense for me right now. Sorry. Regardless I am still locking for a wait to have a smooth scroll while being able to use everything else that gsap offers. I am sorry that it was difficult to navigate the demo. It's part of a bigger project and I tool only what's necessary. I forgot to add content underneath the hero section so you could scroll. I have fix the issue and now you should be able to scroll ?. Also, there ware some different styling for mobile so please enlarge the window in order to see the animation. Maybe this will help. I have also added a 3s duration so the animation doesn't fly off the screen. I did ignore the ScrollTrigger and implemented the locomotive-scroll. It seems to work fine. I don't think that the locomotive package is the problem as I wasn't able to make the ScrollTrigger run even before adding it. Before adding the locomotive scroll, I had overflow: hidden on the App and body and had a separate component with overflow-y scroll. I figure that ScrollTrigger doesn't work on divs with overflow-y so I added the locomotive scroll because I planned to do it anyways. The difference between before the locomotive scroll and after is the before the animation wont event run. Now the animation runs but ScrollTrigger gets ignored. Can you please take a quick look at pages > homepage > hero > index, right before where the jsx starts and see if you can spot anything? If you don't see anything at the first glimpse I will try to find other solutions. Thank you!

I am trying to set up locomotive scroll with ScrollTrigger but it seems that the ScrollTrigger does not work. I would like for the animation to run as scrub, only when scrolling but the tl runs as normal when refreshing the page, ignoring the ScrollTrigger. I am wondering if ScrollTrigger still works with another smooth-scrolling libraries, since gsap now has a SmoothScroll plugin. I made my setup base on a video I found on youtube and I think I set up everything properly. As it seems that a minimal demo is requested often, I have created a sandbox. Thank you!

@GreenSock It doesn't matter anymore. I have used your solution. Thank you!! ❤️

Unfortunately increasing the scroll distance wont help. The main issue is the first tick of the wheel. If the user inputs a single tick on a wheel the animation will snap vary fast. If the user scrolls a bit more, the animation runs pretty good, if the user scroll relative hard the animation will run until the end. I don't think that the scroll speed is the issue. To be honest after I tested it more I don't even know what the issue is. It's pretty annoying that this does not reproduce on the @GreenSock code pen. His solution was quite brilliant and I would really like to make it work.

@GreenSock , I build it in my real project and it seems batter, very close to what I wanted and it should be fine. But I have some problems with the wheel on the mechanical mouse. From what I have reed there is a big difference between the touchpad and the mouse wheel delta. The animation runs very fast when using mouse wheel and I thing that difference is the problem. Does gsap have a way to normalize scrolling and make it the same for different scrolls behaviors?

Hi @GreenSock, I have tring this using only snap but I wasn't successful. Although I would like the animation to run on a single scroll like in this demo . I have tried to replicate the scrolling object that would prevent the scrolling using the gsap ticker. I fell like there is the problem. I would appreciated if you could take a look at the please . Mean while I will try achieving the effect using your example. Thank you!

I would like to snap to the next card with a single scroll behavior like in the codepen demos that i've shared.

@iDad5 Hello, There is a commented version using pin and scrub. I have left all the code I tried because I tough I might be really close. I uncommented the scrub version for you. Also, those are the codepens that I referred to when linking the threats https://codepen.io/GreenSock/pen/NWxNEwY https://codepen.io/GreenSock/pen/abdNRxX

@iDad5 Hello, There is a commented version using pin and scrub. I have left all the code I tried because I tough I might be really close. I uncommented the scrub version for you.

I am fidgeting trying to achieve this effect for a while but I ran into some problems. I am trying to use the scrollTrigger callback to run a animation while the normal scroll is disable and enable it again after the animation finishes. I have use those two threads (thread1, thread2) trying this as their am looking for a similar result but those two example are using full page sections I am now sure if this would work for my animation, witch you can see in the linked code pen. I have also trying using snap when building the animation using pin and scrub but I did not manage to make it snap to each card. Also is not really what I am trying to achieve. The effect I am trying to create is when ever a user triggers a scroll behavior the animation snaps to the second card and so on while the entire section stays in place. After the animation come to completion the use would be able to scroll normally through the rest of the app. Like in thread nr: 2. My question is: Is what I am trying to do possible and if yes? Would you please take a look at the demo and point out what is it that I am not doing right?

I understand. I will try observer plugin and I will come back If I have difficulties.

Yes, so you saying that its impossible? I looked up the observer and it seems that is what I am locking for, but all demos are full vh / vw. Is there a way to transition to normal scrolling and have content below after something like this was implemented? https://codepen.io/GreenSock/pen/XWzRraJ If gsap doesn't have this ability's, js has a function that disables the scroll. I think I could disable it and enable it once the animation finishes using the onComplete function from gsap. This is just a though, I would have to code it to see fi it works.

Hi @GSAP Helper, Maybe my question wasn't structured is the best way. I will create another thread with a batter mini demo and a batter structured question. I simply ask for someone to point out my mistake for why the animation doesn't stays pinned and not working on a single scroll and maybe for some existing demos that I might have missed. I DID NOT asked you to do all the customization for me, the reason I tried to detail what I wanted to achieve is to give you a batter perspective looking into it not as a mean for someone to do it for me. Simply put, the issue is that I am tiring to play one timeline at the time on each scroll, while the section is pinned. I want the animation to play normally not as scrub (that's why is set to false) and not matter the y position, scroll, delta or any of the actions you named above. I will take a look at the observe plugin maybe that is what I am looking for. Thank you very much for your answer and I apologize for my bad question.

Hi, fixed the issue using a different formula. Thx!

Hi, I am trying to create an animation where I scroll once and the text from the first card disappears and the text from the other appears while the image is rotating. I would like for the animation to start playing only when I scroll and the scroll should pe pinned until the animation ends. Also I would like it to for each card. Say I have 3 card, I would like to be able to scroll 2 time so all the card are visible. I have created a minimal demo, maybe you could point out my mistake. Some demos example would be grate as well.

Hi, I have created this demo using only javascript but in my project I am using React. Someone on this forum helped me find a way to scroll to the specific image when clicking on a nav item. That person suggested to use SctollToPlugin but in my react project it does not work. The error that I receive is the one in the title (ScrollToPlugin.js:87 scrollTo target doesn't exist. Using 0). It points to this specific line sliderContainer.scrollTop. This is how I imported the plugins import gsap from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger; import { ScrollToPlugin } from 'gsap/ScrollToPlugin ; gsap.registerPlugin(ScrollTrigger); gsap.registerPlugin(ScrollToPlugin); This part is inside the useEffect. Does the ScrollToPlugin need to be installed separately from gsap? Like: yarn add ScrollToPlugin ?

ty

Hi, Is there a way I could add a delay between the pinned scroll and the normal scroll? It feel like the the normal scroll beggins right as the last image hits yPercent 0 . I would like to be able to scroll just a bit longer before the normal scroll starts and goes to the next section.

@SteveS Yes! Thank you!

Hi, Essentially what I want to achieve is a navigation for the carusel, but instead of dots or line I used words. I would like it when the use clicks on any of the countries the animation will play until the specific country gets in view but I am having trouble. Thank you very much.

@GreenSock Hi, thank you for you examples. it helped me figure it out how to build what I wanted. You can take a look if you want. https://codepen.io/raul-rogojan/pen/rNdLomM?editors=0010

Hello, I am trying to build a somewhat of a carousel using gsap and I encounter a problem. I can't animate multiple elements one by one and one after each other using pin and scrub. (I have also tried batch) I have tried multiple ways cut I need some help. In the codepen I left the most "stable" version I could get. To be more specific what I was trying to achieve is a pinned section, that would run through each img (box) and then continue scrolling as normal. Each box would appear from the bottom from opacity 0, they would stop at the top of the container with opacity 1 and disappear to opacity 0 while the next one takes it's place.