Moritz Profitlich

Do you know: Is there a way to have a single scrollTo instance only and to update it when the mouse moves? — sorry, I did not see that you posted already before akapowl. You just had that idea…

Thanks, akapowl Now it triggers, indeed. Thank your for the explanation of the timeframe – I get the idea. It now triggers whenever I move the mouse. When I scroll it does not trigger. It should be vice versa as I want to stop the eventListener when the user scrolls. I wrote a new pen: https://codepen.io/mprofitl/pen/KKrZKwE. Instead of a writing to the log it removes the eventListener. Why does the mousemove event trigger autokill?

Hello I have a page that automatically scrolls when moving the mouse (using ScrollTo). This works fine. I now want to autoKill the mousemove event as soon as the user scrolls the page instead of just moving the mouse. autoKill is ignored however. The pen I wrote would output an alert if autoKill was triggered. I could create a separate scroll event and remove the eventListener but I ask myself why autoKill does not trigger. Thanks for your ideas!

Thank you, akapowl, for your help Setting the pinType to transform made it possible to move the stage (the div the with the scrolltriggers in it) aside. The website I sent a link to, by the way, was made in our office. Only the active stage is scrollable, with the body’s normal scrollbar. That’s why I asked how to freeze the scrolltriggered headings while the whole stage is moved aside. I realised however that I do not need this as all headings should be made invisible anyway. Splendid, it’s solved. Thank you!

Hello This questions comes with two demos. I have a page with projects in sections. Their headings are pinned with scrolltrigger. This works well: https://codepen.io/mprofitl/pen/JjeNgpG Now, at a click of a button, the whole content should be moved to the right. New content is moved in from the left. The content on the right (the one with scrolltrigger pins) gets position: fixed while staying at its position, the content that came from the left can be scrolled. Please note: Later, another click will scroll stage 1 back in (I did not program that in the demo). https://codepen.io/mprofitl/pen/wvQeWoM For a real life example see https://staging.studiocarch.ch/. Klick any project, it will then move in from the right (opposite direction than the demo). GSAP makes scrolltrigger pins position: fixed. Therefore I cannot move the projects with gsap.to left. The projects move but the pinned headings stay at their place (they just become wider). The demo at the end shows that when clicking the "pan projects" button. https://codepen.io/mprofitl/pen/JjeNgpG I have two questions: How to move stage 1 with pinned content? How to keep all the content of stage 1, including the pinned content, at their positions while the whole stage 1 is fixed? I thought of one approach. Would it be possible to make all content of stage 1 positioned absolutely at their current positions while deactivating scrolltrigger pins? And would be then possible reactivate scrolltrigger without any content jumping? Just for info: I will use Barba.js to load content onto stage 1. My question however is not Barba related. Thanks a lot for your thoughts.

Thanks, Rodrigo, especially for the hint on the better way to implement a mouse-move. We will change it.

Hi Superhero Cassie That’s what I am looking for! Your demo is to the point. I implemented your code into mine and my page still behaved as before. Very strange. Only after deleting the let smoother I got the desired result. I also tried to delete it from your code and find that your code also works without it (only that it also works with it). Question 1: Do I assume right that ScrollSmoother is not needed as the acceleration of h2 is done by a gsap.to animation? Question 2: If (1) is yes why does your demo also work with ScrollSmoother? Why doesn’t it interfere? Now that I saw the animation, I whished for an addition. I wanted to slow down the red-framed text blocks before they get pinned. A slow halt instead of a hard stop. So I did. You can see the result here: https://staging.profitlich.ch/projekte (from July 15th on: https://profitlich.ch/projekte)

Hello I am looking for a way to accelerate objects after they passed a certain point on the viewport. Just like smootherscroll’s data-speed but without change in speed before the certain point. The objects should scroll with normal speed before. That’s what I want to achieve: Images or groups of images scroll in natural speed. They are accompanied by text. Both should scroll in normal speed. At the center of the screen, the title is pinned. Now, after the pin is released, the text should accelerate, as if it wanted to catch up with the image it belongs to. In other words: Until the pin I want the behaviour I get without Smoothscroller, after the pin I want the behaviour with Smoothscroller. In the pen you can see that the text very well runs after the image but you can also see that it already runs ahead of the image before it gets pinned. The latter it should not do. Thanks for your ideas! Moritz When the text is not pinned anymore it should catch up with the image(s). I could get the effect with SmootherScroll but that slows down the text until the center of the screen. Is