Matej Kočevar

Thanks, Zach! Both examples were super helpful for me to understand snapping a bit better.

Just found out the warning appears only in Safari. Right now, you have to scroll the green window all the way to the farthest edge of the next box to make the snap happen. I'd like to cut that distance in half. When reading the docs you mentioned, I thought this could be only possible with an array (eg. snapTo: [0, 0.1, 0.5, 0.8, 1]), so I wouldn't be able to use the "labels" value (snapTo: "labels"). Is that correct?

Thanks for the snapping tip. I'm not sure what do you mean by that - I already have a loop, what would be the difference between old tweens with staggers and the new actual tweens? So far I put labels on tweens that are collapsing the window and snapping seems to work fine: https://codepen.io/matejkocevar/pen/BazVjvN Questions: I wish the window would snap to the next box a bit sooner, but if I've set snapTo: "labels", that can't be manipulated? When I enable snap in ScrollTrigger, I get the console warn below, is there a way to fix it? "Invalid property" "scrollBehavior" "set to" "auto" "Missing plugin? gsap.registerPlugin()"

Hey, I'm back with a new question. Right now, on the Codepen above, scrolling controls the whole animation, both moving and resizing the window. Meaning you can stop scrolling at any time and the window would stop at its current position. What I'd like to achieve is an animation where scrolling only selects the one next or previous box and then the window is resized by itself. That way, when you stop scrolling, the window frames only one of the boxes and is not stuck somewhere in between. How would I achieve that?

Thanks Zach for your super helpful answer! I solved my problem here: https://codepen.io/matejkocevar/pen/qBZNvmR

As a beginner, I admire how easy it is to set up a project with GSAP and how quickly you can build nice and robust scrolling animations.

Hi guys! I'm working on my first GSAP animation and wonder if there is a way to achieve the following moves with the green window and four red articles from my Codepen example while scrolling down: Window slides in from the left side of the screen and lands on article1. Article1 is now inside the window. Window stays on article1 and expands to article2. Both article1 and article2 are now inside the window. Window shrinks and leaves article1. Only article2 is now inside the window. Window stays on article2 and expands to article3. Both article2 and article3 are now inside the window. Repeat steps 2. and 3. till the end At the end, window slides out of the screen from article4. So far, I managed to make the window move across the screen, but how would I make it stop and expand for each article? Should I call a new gsap.to() for each article? Thank you for any help.