celli last won the day on
celli had the most liked content!
-
Posts
364 -
Joined
-
Last visited
-
Days Won
1
celli last won the day on
celli had the most liked content!
About celli

Profile Information
-
Gender
Not Telling
-
Location
New York
-
Interests
design, problem solving, drawing and painting, making and building things from scratch, code, creative thinking, skateboarding, and bikes
Recent Profile Visitors
7,450 profile views
celli's Achievements
-
Rare
-
Rare
-
Rare
-
Rare
-
Rare
Recent Badges
87
Reputation
-
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
-
celli started following CSSPlugin with multiple Pseudo Elements and scrollSmoother change data-speed in mediaQuery
-
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?