Superloop

Thanks so much @mvaneijgen! It's almost that! I've modified the code slightly so the image doesn't stay on top of the first text and I only want the "zoom" effect in the first "block" https://codepen.io/superloop/pen/RwdOxKy But if I want the zoom effect to start at the "top top" while keeping the "block" pinned where it currently is, should I create another scroll trigger? This is where I get a bit lost... I'm also not sure how to call a timeline without pinning (like I did with the title appearance effect). The title appears, but it doesn't disappear. With this, I'm a bit confused. My head is spinning!

Hi! I'm trying an animation, but I don't know how to use ScrollTrigger to make it. I attach a codepen. I have different blocks with different images. What I would like to do is have the images in the first block (only this first one) take up 100% of the screen, and as I scroll down, scale them until the block is pinned in the middle of the screen. Then, as I continue scrolling, the images would move within their frame. I have the second part of the animation working, but I'm not sure how to achieve the initial zoom effect. If anyone could guide me on how to do it, I would greatly appreciate it. Thanks so much!

@elegantseagulls thanks for you answer. I don't want to have a nested scroll for the content in the right. The scroll must be the same that the scrollbar page. It's like the pin is in the two sides (top and bottom). When the sidebar is pinned and you scroll to up, it's like the sidebar is not pinned. I don't know how to explain I can not do a example more similar than adidas page (https://www.adidas.es/zapatilla-ozweego/FX6029.html)...

Hi! I'm trying to make a sidebar like Adidas makes: https://www.adidas.es/zapatilla-ozweego/FX6029.html I need to use SmoothScroller. Without this plugin I would know how to do it with CSS sticky, but with SmoothScroller I can't find a way... When you scroll down, the sidebar stays fixed below (like my codepen) and when I scroll up the sidebar goes up with the scroll. I don't know if it's possible to do this with ScrollTrigger. Anybody can help me? Thank!! :)

Thanks @Rodrigo! This works nice!

I'm trying to make a panel appear when clicking a button and disappear by dragging it, but it just doesn't work. After clicking the button and showing the panel, if I drag the panel upwards, it moves and I would like it not to move. I have tried with maxY, but I don't know how to do it very well. I would also like to know if there is a way to know when the panel goes to the second snap to be able to remove the "is-open" class from the button. Anyone have any ideas? Thank you very much.

Thanks @GreenSock! You're right, I wasn't specific with my questions You are right about the scroll speed. Maybe I needed to test it to see that it won't work properly for the user, but with your thoughts it's clear to me. Thanks again!

Hi @Cassie, I have updated the above example with a more or less real example. With this example I think it's easier to explain my problems https://codepen.io/superloop/pen/zYajrWM My problems: - Scene 1: Between scene 1 and 2 (when I scale the building) I would to pause the scroll (user can scroll but not change the scene) for 1-2 seconds and then change to scene 2. I don't know if it's possible. - Scene 2: it is very fast and I would like to make it slower. I tried to change the end position but I have not succeeded When I finish scene 2 and go to scene 3, I would like to keep pinned the scene 2 after scene 3 has opacity 1, not before. I would like to make parallax (different speed) with the trees. - Scene3: I would like to make scene 3 slower, but not the initial opacity, just the opacity of the cars. I hope you can help me. Thanks!

Hi! I'm trying to do the following thing but I'm doing wrong : 1- scroll and pin scene1 when its bottom is 100%. 2- then I want to rotate the text of scene1 and when finish, show scene2 with opacity over the scene1. I also would like to unpinned scene 1 when the opacity of scene2 is finished. 3- then I want to scroll horizontal scene2 until the end and rotate the text of scene2. 4- when scene2 arrives to the end, I want to show scene3 with opacity and pin it, like step 2 with scene2. When it's pinned I want to scale the text of scene3. Anybody could help me and tell me what I'm doing wrong or what I didn't understand about ScrollTrigger? Thank you very much!

I'm trying to use different components with ScrollTrigger, but I don't know why the calculations don't work and I don't know what I'm doing wrong If I use the components separately it works, but together it doesn't... Can anybody help me? Thanks!

Nice! I didn't update my gsap version correctly Thanks @GreenSock!

Hi @GreenSock! I've just update to version 3.10.3 but when I use smoother.paused(true) I receive the following error in my console: Uncaught TypeError: _inputObserver is not a function at ScrollSmoother.paused (app.js?id=17ee648e3af68080c2b4:50265:23) at openNav (app.js?id=17ee648e3af68080c2b4:53012:25) at HTMLDivElement.<anonymous> (app.js?id=17ee648e3af68080c2b4:53047:17) at HTMLDivElement.dispatch (app.js?id=17ee648e3af68080c2b4:22187:27) at HTMLDivElement.elemData.handle (app.js?id=17ee648e3af68080c2b4:21991:28) Do you have any idea about it? Thanks!

I made some tests but it doesn't work... I edit my codepen. You will see you can get "last" div. https://codepen.io/marctaule/pen/OJzQgRQ If I use refresh in every image loaded, it seems that works but there are some performance problems. document.addEventListener('lazyloaded', function(e){ smoother.ScrollTrigger.refresh(); });

Oh nice!! This works for me

Hi! I'm trying to use Scrollsmoother but I have a problem with lazyload images. The scroll doesn't refresh or update when images are loaded. Maybe it could nice a method for refresh or update scrollsmoother. Anyone has a solution for this? Thanks!