Leaderboard

@jdhadwin Hello there. While your demo is not exactly minimal, which makes it kind of hard to see through everything, on a quick glimpse I noticed, that you are trying to animate svg elements that are in <g> groups from a scale of 0, which I think is at least part of your problem - and I don't think this specifically is GSAP related. I stumbled upon this a few days ago, too - happening for me in all Chromium based browsers on Windows 11. It appears to be a bug in the chromium browser base that was already reported in September 2022 by @Cassie and later marked as solved from what I can tell reading that old bug report - but now it seems to have resurfaced. @Cassie if you find the time, could your maybe re-new that report or something like that? ... I have absolutely no clue how those work, tbh. https://issues.chromium.org/issues/40240236 These following pens don't use GSAP at all - and as you should be able to see, when elements in groups are being 'manipulated' so they start out with a scale of 0 and then changed later on, their values will get changed properly inline on the element - but the element just won't get rendered then (unless you resize the window along the process, e.g., or scroll the SVG fully out of viewport and then back into view again). https://codepen.io/akapowl/pen/vYMWZrL This will not happen with elements that are not in <g> groups, though. https://codepen.io/akapowl/pen/QWPOgzm What helped for me as a workaround was to tween from a very small scale like 0.001 instead of absolute 0. Maybe that can help you out somehow, until that issue gets resolved again. I will add, that this is just something I was able to quickly notice. If it doesn't help in your case, and you suspect that there still might be some issues with GSAP, please create a demo that is boiled down to the bare minimum but still reproduces the issue you're having, so it is easier to identify for others, what could be causing it. https://codepen.io/akapowl/pen/dyLZzyM

Just did 👍 Edit - For anyone wanting updates on this: Since that is not considered a regression of the fix for the original issue, it got opened as a new issue. https://issues.chromium.org/issues/332328859

Commented on that thread again! 🫠

Hi, The demo I shared in my previous post was a way to show you how to do this a learning resource of sorts, nothing more. We don't have the time resources to provide fully working solutions for our users or give free general consulting in these free forums. We have to keep our focus on solving GSAP related questions and issues. In order to understand how this works I recommend you to check this guide by David DeSandro: https://3dtransforms.desandro.com/carousel Finally if you want to use the Motion Path Plugin you can check any of these threads: Also you can see this video where @Carl goes into a lot of detail about this: Hopefully this helps. Happy Tweening!

Thanks! ...let's just hope they don't take it as an April Fools' Day prank.😅

A position: sticky header will behave as relative until scrolled and "stuck" to the top of the screen, then it behaves as fixed. So the content will sit underneath the header and then scroll underneath. If you don't want the content to sit underneath and then scroll, just make the header position fixed- then the content starts off in the right position, no need to use JS to fix anything.

Use absolute: true, in Flip.fit, it will fix the jump.

Thanks guys, based on your answers I've come up with a solution.😁

If it's actually DUPLICATING the graphics, that's a browser rendering bug. I doubt it'll help at all, but you could try: ScrollTrigger.config({ignoreMobileResize: true}); ScrollTrigger.normalizeScroll(true); (one or both of those) And of course make sure you're using the latest version of the GSAP files (your CodePen looks fine).

Hi, @akapowl one of the forums superheroes created this nice demo using locomotive that you can check: https://codepen.io/akapowl/pen/wvJroYy Happy Tweening!

Well so at that point just add your own "buffer". I probably should have made a new pen but I duplicated to show you how both are the same pretty much. just added a parent div with extra height. moved the end: 'value value' of the trigger end based on that height and where I want the pin/animation to stop. tweaked the animation to maybe better replicate what your after in a timeline. [edit- removed rant] If the updated pen is still not what your after, I would probably try just doing the disable scroll from one the onEnter/Leave pops. https://codepen.io/b1m1nd/pen/yLeoQOG?editors=0010

Almost but still not it.. You still scroll across the white section when your animation is going. The position of the screen needs to be fixed in place untill the animation is done. In other words, you cant scroll to the last grey division untill the animation is finished.

Really really helps to post your own codepen with the minimal example, without it people are just stabbing in the dark. Cause what it sounds like to a noob like me is you just want a basic scrub animation... While you could be trying to do something different. Simple as it gets example. Like so? https://codepen.io/b1m1nd/pen/yLeoQOG?editors=0010