celli

This is great PointC and Jack, thank you!

Hi all, I hate to dig this one back up. As I dug deeper into it, I noticed that it seemed to kill all of my scrollSmoothers, not just the ones that I am trying to target. For instance I added two boxes above the images without the class of .smootherReset768 and while those keep their original data-speed attributes (resizing below 768px), the smoothScroller stops working for those elements as well. When I resize the browser to above 768px only the elements with my class .smootherReset768 re-initiate the scrollSmoother behavior. I tried it several different ways, but I was still not able to get my other elements without the target class of .smootherReset768 to retain the scrollSmoother behavior, without removing the t.kill() function.

*** EDIT: Sorry, it does work, I had to add OSUBlake's t.kill() -- I forgot about that ***

I actually notice now that I test my codePen further in live mode, when I resize my browser multiple times, the behavior doesn't seem to stick, the original values seem to remain persistent. I also notice that if I start my browser under 768px wide, the data-speed change doesn't take effect.

thank you guys, this works nicely. And it will work selectively (only for the elements that I'd like it to effect) perfect.

yes, exactly. I tried this with the loop in my else statement, but I must be doing something incorrectly. I just don't see how I am recording my originalSpeeds. If this is beyond GSAP support I totally understand, I will keep trying on my own and appreciate the help.

I'd like to set effects to false, but only for elements with a certain class of .smootherReset768, and then set them back to their original, so I really don't want to kill the whole scrollSmoother. When I try to recreate the scrollSmoother in my resize function it doesn't seem to work, so I f figured if I can capture the original values and then re-inject them into the elements when I resize over 768px that would work (also as you suggested), I just wasn't able to get that working. I see your code above so I'll give that a whirl, but it doesn't reference the elements with the class of .smootherReset768, so I'm not sure where I get the originalSpeeds from.

I am trying to create the loop, record values and then return them back into my elements, which I have not been able to do successfully as you can see in my pen—but now I am wondering can I kill() the existing scrollSmoother in the elements with this class only, and then restart scrollSmoother in my resize function? Or would that not work?

humm, yes that will be the trick I will try

Hi, I have a scrollSmoother page setup and I am using in-line data-speed attributes. I am changing the data-speed at a 768px break-point, because *some* of my content stacks at that break point and I need to change the data-speed at that break-point, which works well. I want to return my data-speed to their original settings when my browser resizes again to larger than 768px, is there a best way to accomplish this? Obviously I do not have anything in my else statement to change the data-speed to anything specific, but since there will be many elements that will use this technique (and the data-speed numbers would be different for each, depending on what the situation is), I want to see if I can easily return each of the elements to their original data-speed in some way that I might be missing or with smoothScroller ? If you resize my codePen, look at the 2-column images and then resize back to above 768px, you will see what I mean.

@akapowl yes I see, thank you. I changed my original pen to change the background-color instead using CSS Variables. Works nicely! I appreciate you calling out the hint box on the CSSPlugin page, I will read up and start using CSS Variables

Hi, I have a loop with hover animations happening in each element, which all works except for my pseudo element with is selected using CSSPlugin. I can animate a single pseudo element, but when I put it into a loop (for multiple elements), it doesn't seem like I can select each of them. Is there a special way to use the CSSPlugin in this instance?

Will do, Thank You Jack!

@OSUblake, have you noticed since the 3.10.3 update that the smoothScroller is acting unexpectedly when resizing the browser window ? I was going to recreate another codePen test, but I checked this page https://greensock.com/scrollsmoother/ and I see the same thing happening there. When I resize my browser window/viewport from large to small, sometimes the top of the page is cut off, and often the smoothScroller and parallax effects stop working, until I refresh the page again. I just wanted to see if you are seeing that behavior as well on the gsap page.

@OSUBlake, yes the update works in my initial test, thank you! Is there anything else I should add to smoothScroller or in my js?