blende64

Hello Rodrigo Oh boy, I could have thought of that. That was exactly the solution. Thank you very much. Kind regards

Hello I have a page with a fixed header. The header should be transparent when the page is initially loaded. When the user scrolls about 100 pixels, the header should get a background color. I was able to implement this in the attached CodePen. However, I have noticed the following problem: If the user scrolls to section 3, for example, and then reloads the page, the header is displayed transparently for a brief moment until the tween has been executed. How can I ensure that the header is immediately provided with the background color when the page is reloaded? Thank you very much

Hello Carl Thank you very much for your comments. They clarify things. In my implementation, I have set suppressEvents:false for the time method so that reversed() outputs true when rewinding. Thanks

Hi In the linked CodePen a timeline is defined which moves the square to the right and at the end outputs the value of reversed() in the console. The timeline is paused by default and plays either forward or backward when the button is clicked. If the timeline is played backwards, the output in the console is missing. It is as if the function is not being executed. If another to tween is added after the function, "reversed:" true is displayed in the console as expected when reversing. Is this a bug or am I doing something wrong? Many thanks and kind regards

This works great. Thank you so much. In the CodePen I think a small error has crept in. Line 16 should read gsap.to(visible, {autoAlpha: 1, stagger: 0.1}). Just in case someone should wonder why the code does not behave as desired when reloading.

Hi I have implemented a simple staggered reveal animation with ScrollTrigger.batch(). The below example was used as a template. The problem: If the user scrolls all the way down and reloads the page (or in the case of CodePen the frame), it takes quite a while until the elements become visible. This is because the elements are revealed in order from top to bottom. Can I somehow optimize this so that only the currently visible elements and all subsequent elements are animated? Thanks a lot!

In my opinion, this would even be the cleaner solution, but in our context it does not work as desired. We have adapted @Cassie's suggestion so that the appropriate CSS class is applied to the html element, not the body. Using the class, we set the value of scroll-behavior to auto.

Works like a charm. Thank you very much.

We have the same problem. However, we need scroll-behavior: smooth to scroll smoothly to anchors on the page. How can we make sure that the ScrollTo plugin still works correctly?