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?

didn't mean it like that - no rush, but if it is even complicated for you, I do not have to feel too bad that I failed

Hi Blake, the wrap seems to work just fine, even with different width’s elements. I just did not manage to center the snap. Would be great if someone could make that modification. I tried to modify the function myself for two days, but had to accept that this is a little above my capabilities ?‍♂️

Hi everyone, I am trying to create a dragabble seamless loop and came across the helper function in the docs. However in my case the items in the loop are of different widths and I always want the item that is closest to the middle of the wrapper to snap exactly in the middle position. I played around with the configuration object, but I cannot get it to work. Is this at all possible with the current implementation of the helper function?

Thanks everyone, I figured it out. By copying stuff over to codesandbox, I realised that it was a problem with my webpack configuration and the order of execution. ScrollTrigger in home.js got actually called before the scroller proxy in main.js was assigned.

Not sure I fully understand what you mean. In main.js (common code) I initialize loco scroll and set the scroller proxy to my smooth scroll container. In home.js (page specific code) I just use scroll trigger and pass the smooth scroll container to "scroller:" I can see the markers in the DOM being attached to the smooth-scroll container, but they are not moving at all.

This cannot be the reason. I register scrolltrigger after the DOM is ready and I can see all objects that I need for the animation. There are no errors in the console - not even warnings. I do understand that this is super hard to analyze, but I cannot reproduce this in a codepen for obvious reasons.

Having an issue with scrollerProxy which I don’t understand. Hi all, I am using ScrollTrigger and Locomotive Scroll in a node environment My structure is the following: main.js (this code will be used on all pages of the website) import gsap imports scrolltrigger imports locoscroll initializes locoscroll initializes the scrollerproxy exports the scroller proxy --> scrolltrigger working just fine home.js (this code is only being used on the home page) import gsap import scrolltrigger imports the scroller proxy (value “.smooth-scroll”) --> scrolltrigger NOT working. E.g. all markers move with the scroll. It seems like the scroller proxy is not recognized. When I copy the same code to main.js it’s just working fine. Does anyone have an explanation for this?

Thank you so much, Cassie. I spent literally two days on this and couldn't figure it out.

Thanks, Cassie. The codpen was just a simplified version of what I am trying to accomplish. I will only apply the effect when the image is in view, but event this might be too costly, especially because the effect will be dependent on scroll. I will need to test this out.

Hi everyone, I am trying to recreated the effect on this site by animating the scale of an svg displacement map (you need to press and hold the mouse button to enter the list of images): https://yuto-takahashi.com (I know this has been done with WebGL, but I do not know enough about shaders and Three or Pixie to replicate it like this) My starting point is this codepen: https://codepen.io/GreenSock/pen/eYpGLYL?editors=0010 However I cannot get my head around the correct usage of the quickSetter when trying to animate the scale of feDisplacementMap, since scale of an sag filter is not a standard property. I also tried the attributePlugin, but with no luck,. When calling the quickSetter in the codepen I see the following error in the console: InvalidCharacterError: The string contains invalid characters. After trying for two days now to get this to work, I thought maybe someone could point me in the right direction.