Hugo Priet

!! Did I just need the Refresh?! Thank you! That was exactly what I was looking for!

Hi @OSUblake, thank you for your quick answer! Here you go , I updated the minimal one and here's the issue : when you add an element to the collection, it doesn't toggle the "active" class based on the trigger when rendered, only if I resize the window. It works perfectly with a static array. Here it is: https://codepen.io/smoothdev35/pen/VwMNweb?editors=0100

Good morning (or whatever), mighty wizards! I'm trying to reproduce a UI animation I found on Dribble with React & Greensock (as per it is my hobby), and I'm using FLIP and ScrollTrigger. So far so good on the FLIP part because it is properly amazing, but I'm having a bit of a struggle with a specific ScrollTrigger instance. Let me explain: I have a collection of (selected) items in my app state, and I render them starting with a FLIP animation inside a scrolling container. I have state values linked to css custom properties to update things like opacity, pointer-events, and in this case the overflow property of the container. This way, the element can FLIP into its container, and then revert to overflow : scroll because obviously. Inside my selected item component, I set up a ScrollTrigger instance with ScrollTrigger.create in order to have only the three items in view to toggle "active" class during scroll. Here's the main issue: I struggle to understand why, and I've been on it for a while, the main idea works flawlessly because I tried to minimally reproduce it here: https://codepen.io/smoothdev35/pen/VwMNweb But! In my complete demo, the trigger only seems to fire if I resize my codepen window! Going through the forum, I figured it meant the trigger is reacting to the body rather than the selected scroller. I'm not sure if it has to do with forwarding refs, memoizing something, persist something through re-render, some obscure hook I'm unaware of, my styling changes based on state, or if it is simply a blatant beginner mistake I'm not able to see! Either way, I would be extremely thankful if someone could help me on this one!

Hi Zach, thank you for the details. The main issue I can see now with your solution available (except for the common mistake ?, my bad) is that I didn't know how to use the end function with maxScroll for the 'dynamic' calculation. Thank you very much for helping me out ?.

Hi, I'm trying to animate cards on horizontal scroll inside a dom element (not the viewport): I have a single timeline and a scrolltrigger with a dom element (container) as scroller. The animation of the cards works with the scrubbing perfectly, but when I resize the screen, the start position for the animation seems to shift and offsets the whole thing. I tried setting a function for the start value, and tried with the infos on the following thread, but I can't seem to resolve the issue. Any help greatly appreciated! Cheers.

Hi Zach, thank you for your help. I will remember to keep it minimal next time around!

Hi great wizards of greensock, I 'm trying to reproduce the functionality of the gallery in the linked shot with ScrollTrigger. I joined the pen I have working, any help is greatly appreciated! shot-1.mp4

Hi @ZachSaucier! As simple as the underlying logic might seem in the end, it took me some time to understand how to animate clipping with the hidden overflow containers and translations! Here's the finished demo pen (second image and polishing coming later in prod), let me know if there are apparent issues in my implementation: https://codepen.io/smoothdev35/pen/abNMeYp Thanks again for helping me get there! Cheers, Hugo.

Hi @akapowl! Thank you very much for taking the time to share your work with me, it's definitely going to be very helpful for me! Cheers, Hugo

Thank you very much for your patience! I knew about basic clipping, but I hadn't tried to make a whole sequence using it. I'll come back to you and show the final result!

Hi! This is obviously a little more complex than what I can do so far, so could you enlighten me just a little bit? What exactly do you mean by 'clipping'? Are you referring to the sequencing of transitions in the timeline, or to the the image transitions themselves? As for hooking the tl up to a single ScrollTrigger, I'm a bit confused about how to use a single scrolltrigger for all the sections, and how to pass the duration of the sections as a parameter for my tl. I'm trying to wrap my head around the whole thing because I want to achieve it, thank you very much for your help!

Thanks! I'm going to try and get the first timeline right before anything!

Thank you so much for the quick and detailed answer! I'm getting right on that!

Hi fantastic people of Greensock! I'm a big fan, and a shockingly green member. I'm wrapping my head around ScrollTrigger, and I'm trying to achieve an effect like the one here: https://www.easytigerfilms.fr/en/actualites My codepen demo only deals with one image for now. I've pinned the images so the basic overlay effect works when scrolling down, but when I scroll up (logically), the translation occurs backwards. I'm stuck there: I don't know if I should use disable()/enable(), create two triggers, toggle classes.. I would like the active image to stay fixed in the frame while the following image translates on top, no matter if it comes from above or below. If you have any idea of how I could get there and what I'm missing, that would be highly appreciated! Kindly, Hugo.