Jack7cz

Hi guys, I am trying to create "sidescroller game" like animation. As you can see in my code pen, I am animating ground and layer with obstacles. For that I am using the main Scrolltrigger. Then I am trying to tap into this ScrollTrigger animation with another ScrollTrigger to make character "jump" over the obstacle. Apparantly this is not correct way to do it, cause when you scroll to the end whole pin is broken. Can someone please give me a hint how to approach this issue? Thanks a lot! https://codepen.io/kubanedo/pen/YzdMqBZ

Hi @akapowl , you are real superhero :D! Now everything works fine, I was even able to solve other problems I had with this in my SPA app (for example handling the header when going back or forward in history). Thank you very much, now is even more clear to me the problem about nesting timelines with ScrollTrigger :). Have a nice day, Jakub

Hi @PointC, thank you for your message :). I've tried to reduce it little bit and I've added also comments into my code so it is hopefully more understandable. As you can see on the video below, when the header is half white, half dark and you click the button, then the header becomes fully dark, which is not something I wanna to happen. It should stay half white and half dark as before the button was clicked. I am wondering if this is something that could be fixed :). https://codepen.io/jack7cz/pen/abqdGWm Thank you, Jakub

I think I see your point. In your demo, you are using scrollRefresh in click listener for one specific situation. But I wanted to use me code all over the website, so I don't want to add ScrollTrigger.refresh() on every button that shows some content or so. There can be more situations when the document height changes. That's why I used ResizeObserver, which checks if there are some changes in the size (height) of document. So I guess this is the only possible way. I've updated my Codepen, now the ResizeObserver is working correctly. https://codepen.io/jack7cz/pen/abqvpVO Would you know if there is something I can do with the problem, when header is on the border of two sections (image 1)? When the button is clicked, which at the end fires ScrollTrigger.refresh(), then the whole dark header is shown (image 2) instead of half white / half dark header which is seen on image 1? Thank you very much for you help :).

Hi @PointC, thank you for your message :). Do you mean to use refresh method in combination with ResizeObserver, right? Or is there another way? I replicated in another Codepen what I have in my Vue project with ResizeObserver. Actually I did use .refresh() method already. Unfortunately in the Codepen the recalculation is not working at all :O. Any idea why? I would like to show the problem in there. https://codepen.io/jack7cz/pen/abqvpVO But in my project where the recalculation somehow works, I am running into issues in case when the header is half in inverted (dark) section and half in normal (white) section. .refresh() When I click on something which changes height of page .refresh(), then probably "from" settings are used from my fromTo Tweens as the whole dark height is shown and to have the header correctly half dark/ half white. User needs to scroll a little. I've tried to force to move the scroll position programmatically, but the effect is that the whole dark header still blinks. Killing all tweens I did also try to kill all tweens and set them again, which I believe is nonsense to do, but then it applied my timeline.set( settings instead of "from" settings from "fromTo". Just saying what I've tried. Thanks a lot

Hi guys, I am trying to reproduce Midnight.js (https://aerolab.github.io/midnight.js/) with ScrollTrigger. And I've encountered problem. When some content on page changes its height, ScrollTrigger does not recalculate start/end values as it does when resizing window. I was wondering if ScrollTrigger can recalculate it on its own, or my backup idea is to use ResizeObserver maybe? Here is my pen: https://codepen.io/jack7cz/pen/NWyGbZw Every help will be much appreciated. Thanks.