Mattrudd

Happy Monday folks. I've cobbled together a kind of navigation grid, whereby videos are played in a preview box - each video corresponding to the hovered block via a data attribute. https://codepen.io/matt-rudd/pen/BaEPeYQ The problem I'm having is I can't figure out how best to prevent the 'base video' flashing into view if the user moves the cursor quickly from one video trigger block ('core-skills__blockChild') to an adjacent one - behaviour that's highly likely of course. Understand this is more of a logic problem but thinking my issue could be fixed with some clever GSAP position parameter usage. It's bound to be a simple fix I'm not seeing - of setting up a timeline delay or some kind of flag system so the base video only shows if the cursor settles for more than a second or so between hover blocks. I've been staring at it long enough to be missing the obvious I think 😵‍💫 One easy solution would be to only trigger the return to playing the base video once the cursor has left the block containing the hover blocks - but I'd like to have it a bit more finely tuned in case the cursor settles in the column/row spacing between hover blocks. As ever, hope what I've described makes sense!

Thank you! I've just been doing exactly that - stripped it right back. https://codepen.io/matt-rudd/pen/mdoWMZv Managed to get it how I need, save for one aspect - ensuring the flipped element stays on top during the flip box? I've set absolute: true in both Flips, but I'm sure I've seen some documentation on this kind of z-index issue during flip but can't seem to find it again!

I've managed to get very close with the original version... if you'll permit me the less than minimal pen (although I think I'm running very low on permits!), the flip code in question is in the last 40 lines... https://codepen.io/matt-rudd/pen/BabWoeP All I need to figure out is how to get the flip-back working so that it reparents... I must be doing something wrong with : if (video.parentNode === newContainer) { flipBackToOriginalParent(video); Then there's the small matter of getting the background to "rgba(0, 0, 0, 0.75) for the flip and then back to 0,0,0,0,0!

@Rodrigo Wow thanks for this! Appreciate my pens aren't very minimal but grabbed a template that has lots of related parts. I'd still like each panel to snap to centre like my initial pen - I know I could work out a snap on the ScrollTrigger but I like the measured way the Observer works in my pen. The Observer way misses out the lag of ScrollTrigger's snap, which is what I'd prefer here. I'll try and replicate the Observer method in your pen, then it's just a case of triggering the text swapping on the left, adding the vids et voila!

Hi there GSAPpers, I'm aiming to make an element in a vertical scroll of images flip into a central container. The idea is, the carousel of blocks will eventually hold videos. > video (housed in ".stack__item" container) clicked > video flips into a larger, centred container, lightbox style > video plays > click video container again, video stops and returns to original position nested in carousel The trouble I'm having is I'm not sure how best to manage the dynamically added class... I only want the 'flip' to occur on the active highlighted element ('stack__item--current'). I'm stuck on how to manage the logic so that this dynamically added class is available to the Flip function. Maybe it needs to be in some kind of onComplete as part of a timeline? The pen shows it (very clunkily) working on the parent element ('.stack') Here's a pen without the Flip/flip container, for reference: https://codepen.io/matt-rudd/pen/PoLWQdb Hope that makes sense... I'm stretching my knowledge as ever! Any big or small nudges in the right direction greatly appreciated 😬.

Hi people, This may well not be workable - but I'll always wonder if I don't ask! My site is using ScrollSmoother throughout. On one page there's a modal (which is a full-screen overlay) that has overflowing content. I'd much rather have this modal content scroll as smoothly as the page content. The Codepen example cribbed from the forum shows a modal with ScrollSmoother paused and overflow:auto allowing modal content scroll. So I'm wondering - is it possible to apply ScrollSmoother to the modal as well? Maybe apply a second instance of ScrollSmoother to the modal, then kill this and unpause the main body instance? Figured, as ScrollSmoother is based on ScrollTrigger, that it might just (like GSAP magic) require a fancy nested scroll type affair being hooked up! Before hitting 'post' on this, dug a bit deeper still to see that ScrollSmoother sections is coming! So maybe a stop-gap fix? Thanks as ever ☺️

@Toso Of course! I totally forgot about that method... must've been the late night after all! Thanks for the reminder/solution good sir.

Hi folks - first post since the new look (I must be finally getting better at this ha)... I LOVE it! Stylishly fun, great job! That said, I'm stuck with a quirk... yet another late night coding session so I'm bound to be missing something very simple! The scaleY animation I'm using works well, up until you really whiz the cursor across the containers. When the animations are triggered very quickly one after the next, they seem to jump straight to scaleY: 1 then get stuck rather than animating back down to 0. Thought it may be the absence of any "if animating" statements, but if you mouse over to another container at anything less than warp speed, any initial animation does reverse. Any pointers to explain this issue, so it works no matter how fast the cursor movement? May just be a case of setting up the animation outside the EventListener function to use play/reverse? https://codepen.io/matt-rudd/pen/zYeWbqR

Hi @Rodrigo, thanks for your response, appreciate your time, as ever! That makes sense. The ‘smoothness’ requires time for the ease, so to speak, which messes with the imperceptible jump. That’s how I felt - maybe I’m overlooking something, but I think it’s going to be tough this way because of the way the ScrollSmoother wrapper and container have to work. I’d go down the alternative observer route that’s been shown elsewhere in the forum, but the problem there is my production site uses barba.js across all pages. Without going into loads of detail (and forgive me if you’re already familiar) but that involves a barba container and wrapper similar to ScrollSmoother, except the barba wrapper sits within the smoother one, and each page has to be structured in the same way for barba to work properly. I’ve just realised while typing my waffle above that I could just leave the html structure the same and kill the ScrollSmoother via JS on just this horizontal scrolling page! That way I’m free to get my head around one of the observer infinite scroll approaches that provides its own smoothing, and then turn ScrollSmoother back on with a barba hook on page leave. Forgive me, I’m almost typing to myself there ha! You’ve helped get the cogs going and that does seem fairly simple, at least in theory. Thanks man.

Apologies, yes, it's yet another horizontal scrolling issue, they go on infinitely it seems ? I've got an infinite horizontal scroll set up using a ScrollTrigger loop, but I'm wondering if it's actually possible to add ScrollSmoother into the mix? The setup I've pinched from somewhere and adapted... I can't figure out how I might be able to cater for the ScrollSmoother wrapper. Keen to know if it's doable without too much hassle! Thanks as ever.

Think I've managed to get there... remembered seeing a class added as a kind of marker as part of the flip, and that's done the trick to fade the hover video but not the flipped video. Seems to work ok. Bit of a fade still on the outgoing hover video but think I can live with that. https://codepen.io/matt-rudd/pen/vYQjpGZ

Good advice thanks. Had another run at this, using reparenting a bit better/like a previously use version I've studied... The only thing left to fix here I think is how to fade out the intial hovering video (connect to cursor position) on each li element... it fades for the first line but not the others. https://codepen.io/matt-rudd/pen/vYQjpGZ

Hi GSAPpers, I'm close to figuring this one out, but not quite close enough... In my setup, a video element fades in on mouseover of each li element. Each video of course corresponds to each li element via a data-id. I've set a flip.to so that when each li is clicked, the video flips to a larger fixed size. This seems to work ok on initial click, but then on subsequent clicks on lines, the flip doesn't animate, it just jumps. Furthermore, I'd like to animate the lines out on click (while flipping to new state) Then animate lines back in as the video flips back to old state. Not sure where I'm going wrong - know it's likely an ordering of tweens and Flips but can't quite figure it out after re-reading the docs! Thanks all.

Not sure how I managed to miss this solution Jack @GreenSock, but just came to implement this section in my build and am, as ever, very grateful. You've saved me an afternoon at least!

Hope you don't mind me piping up one more time on this... Pretty darn pleased with where I've managed to take @Rodrigo 's example to... there's just one thing I'd love to crack to finish things off. Currently, when the title is pressed, the corresponding article fades in, then fades out on back arrow click. What I'd like to swap this for is the SplitText effect (currently commented out - lines 52-55) - at least for the article animate IN. Any nudges/solutions for making this swap would be warmly appreciated! https://codepen.io/matt-rudd/pen/RwqjWoy What complicates this (at least for me, late in the day here!) is that I need to deal with hiding the two inactive articles. This was easy with a simple fade as I just set .article-text to opacity: 0. I tried using gsap.set and a few other ideas to hide the other two inactive articles, but didn't quite get over the line. I've mentioned already on here, I'm only learning JS because of GSAP... so it's highly likely I need to take a better look at indexing! Getting there, slowly but surely! ?