Sascha Fincher

Thanks, that's super cool. Gonna play with it later :)

Yes, that was it. Thank you very much! I did not think of the fact that the GSAP properties simply are object keys 🤦‍♂️

Hi everyone, I am working on a color theme switcher at the moment, that is completely based on CSS custom properties. Normally I would tween those CSS variables like this: GSAP.to(element, { '--color-text': '#000' }) My problem is that the properties I am tweening will always be passed as variable to my color manager. E.g. function({key, color}){ GSAP.to(element, { key: color // key will contain a string with a custom property }) } I am sure I am missing something very basic, but cannot find a solution. Is the dynamic "creation" of a property from a string possible at all? Any hints would be appreciated.

Hi Jack, could I have a play with 3.10.5 as well? I am still trying to solve this problem: and a few other things related to ScrollSmoother. ...would need the npm though. Best Regards, Sascha

Unfortunately yes. I used your link, forked it and tried it in debug mode. I attached a link to s screen recording where you cam see it happening. https://we.tl/t-CLGl5pUb8O

Thanks guys. Just tested it out briefly. It still happens, but not as often as before. It happens 100% when doing the very first touchmove after page load. After that it sometimes happens, but only when doing movements from the visible browser area into the bottom tool bar and back up to the url bar. This happens not on every occasion. Still trying to find a pattern for this behavior. I am currently on my phone only and will create a new test pen tomorrow to make sure there is absolutely no caching issue.

Indeed I did mess with the body height and position, because I did not want the body to scroll (to prevent hiding the bars). You did understand my question very well and I do understand now that what I thought could be a solution to the initial problem I posted in the beginning of this thread will not work. Let's forget about this then In that case the problem in the first penis still valid: https://codepen.io/HankJamesMoody/pen/JjMVXEB You can also see it in one of your pens: https://codepen.io/GreenSock/pen/bGaWjpw

Quick update. I thought this issue was fixed by version 3.10.5, but apparently it was not. I was investigating a bit further and as you know the whole problem occurs because of iOS showing and hiding the navigation/tool bar. Now, by setting body to window.innerHeight and position: fixed, the bars on iOS will always show and not move. However, SmoothScroller does not scroll in this case. My understanding is that the smooth-content is being Y translated when scrolling, so why does a 100vh (or rather window.innerHeight) body with position:fixed prevent it from scrolling? smooth-content gets an inline-style of position: absolute and when I do a normal css transform it moves as expected. However, the matrix3d transform that is applied by ScrollSmoother does not update when scrolling. Is this behavior intended by design?

Hm, it looks like it fixes the problem that I posted some time ago. The codepens are working now. Before they had the same problem that I had with my current develoment.

Ok, tried it out now. Even in the simple codpen it does not make a difference. One more observation: On iOS 15 you can choose in the Safari setting if you like to have single tabs (url bar on top) or a tab bar (url on bottom). The whole problem only appears to happen when the url bar is on top. In both scenarios the browser is hiding the bar(s) after a bit of scroll, but it seems only to be a problem when the top and the bottom bar needs to be hidden.

Just tried it out with the new tgz, but it does not make any difference.

Thanks @OSUblake will look at it when I am back at my desk. Need to make a few changes to my code first, since I am using the npm tgz.

Hi everyone, I know there has been a lot of discussions lately about ScrollSmoother and iOS/Safari, but I still could not find a solution to my problem. I only see this happening on iOS 15.4.1 on Safari. To see this effect you need to run the pen in debug mode. When you touch down on the screen and start scrolling (with your finger down) really fast beyond the top of the viewport (basically to the very top of the url bar), the whole content disappears and reappears only when releasing your finger. On the page I am developing this effect is even worse with the menu bar jumping wildly around, but you can see the effect in the pen as well, although I only included the bare minimum to reproduce the effect. Edit: This behaviour goes away when I disable normalize scroll. However, I actually like what the flag offers. Thinking about disabling it based on device detection, but this is never a stable solution since I do not know which devices would have that problem.

Hi Blake, perfect, thank you. I will leave it as it is then. It‘s working smoothly 👍🏻

Hi, This is more a general question and not a problem. I am creating a slider animation which is also using SplitText and I could use some advice on how to optimize it. During a slide change I run a couple of animations and one of those is a SplitText animation. What I am currently doing is: do the splitting up front for all the text in alle the slides when my slider initializes create in and out timelines and save them in an array play the respective timelines once a slide is selected It's working perfectly fine. However I am asking myself if it would be better to calculate everything on the fly. So basically create the in- and out-timelines and the splitting on slide change. This would probably have the advantage of less memory usage and I would not have this totally cluttered DOM all the time. It would also allow me to do a revert() after the animation is finished. The only thing I am not sure about is the performance impact. Maybe anyone has a best practice advice on this?