cereal_beast

Super helpful, thank you. Just realised your demo uses inertiaPlugin which isn't free to use, but thanks anyway!

Hi, My previous question was related to a different pen and was also asking how to use drag instead of mousewheel, for this pen I want to simply remove the mouse wheel scroll.

How would you remove the mouse wheel scroll functionality from this pen, so that it is draggable only? Leaving all of the snap settings enabled.

Ahh wait there is one final issue, the scaling is applied when onPress (click), but I need it to only apply when clicked AND dragged.

yes perfect! Thank you.

In my demo (reattached here), the sections (boxes) are being scaled down when scrolled and then scaled back up when the active box is fully in view but only when scrolling with the mouse NOT when dragging. The code above is the code that is doing this: tl.to(".box", 0.25, { scale: 0.5 }); & tl.to(".box", 0.25, { scale: 1 }); Im not sure how to use those gsaps in your demo though. https://codepen.io/gwjr/pen/bGvoaQp/9a9293774802d781f8c466cd6777a27b

Yeh thats great thanks, I can fix the boundaries etc. One last thing, do you know how to incorporate the scaling from my demo with draggable? tl = new TimelineMax(); tl.to(".box", 0.25, { scale: 0.5 }); tl.to("#targets", 0.4, { xPercent: -100/slides.length * activeSlide }); tl.to(".box", 0.25, { scale: 1 }); }

I've added draggable along the x axis to my pen, but Im unsure of how the 'points' work which is what snap uses. I've read the snap doc but I'm still none the wiser. How can I just make each '.box' snap to fit the screen (100vw, 100vh) when the next box is dragged over 50% of the way along the x axis (so the next box is taking up more of the screen than the previous box)

I don't want to have any mouse scroll functionality on the section, so the slider is only "scrollable" using drag. Like this but I need the boxes to snap as they currently do. - https://codepen.io/GreenSock/pen/ZELQqeJ

Hi all, How can I change the functionality of this slider from using the mousewheel to scroll horizontally to using click & drag?

Thank you guys!

Im trying to achieve a multiple line text reveal effect where each line is revealed individually, shown here, but I cant figure out how to animate them individually. In this demo the text elements all have the same class and the code is just using that class to trigger and target?

Thats super helpful thank you! Apologies for the DM, I thought that because I had marked the question as "solved" you may not be notified.

Amazing thank you for explaining your edits also!

Im having an issue with the FOUC, I've set the opacity to 0, and autoAlpha to 1 but the animation plays briefly and then disappears? Any idea why thats happening?

Im having an issue with the FOUC, ive set the opacity to 0, and autoAlpha to 1 but the animation plays briefly and then disappears? Any idea why thats happening? Working example here: https://codepen.io/gjjr/pen/MWVYNdR

Thats great thanks!

Im having an issue with a fullscreen menu, using CSS it is set to "transform:translateX(-100vw);" so that it starts off the page to the left, then using GSAP it animates to show fullscreen using "x:0". The problem is the 100vw doesnt seem to be updating when the browser is resized. If you look at my codepen, make the browser smaller and refresh the page, open the menu, make the browser bigger then close the menu, you will see that it doesnt close all the way as its remembering the old width.