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! ?

@Rodrigo doh for my attempt I'd added a hypen - no-wrap instead of using the correct nowrap ?‍♂️ That worked a treat. Thanks again. Que tengas un buen fin de semana!

Wonderful @Rodrigo thank you! I'm confident I can crack this now. Thanks for showing me the way. Just a remaining thought... noticing there's still a jump - a line-break - towards the end of the text flip. Is there a way to remove this jump so the text stays on one line right through the tween? Have tried adding the css 'white-space: no-wrap;' in various places but this didn't seem to be the answer.

Update: I've got a bit closer and since been able to work out the back arrow and the pressing of the Text one button to run the Flip again... https://codepen.io/matt-rudd/pen/QWJqRKx However - not quite managed to make it so that after the arrow button press: The article text fades out (initial tl reverses) just before the FlipMove2 function runs, instead of how it is now - tl reversal runs just after the flip If possible - for the flipMove2 to be able to be sequenced in relation to the tl reversal tweens, so I can make flipMove2 - the reparenting tween (Title one shrinks back to original size) happen at the same time as title two and three fade in again. I'd ordinarily use position parameters, but here I'm using .add so not sure how to go about this timing. The whole cycle works again... currently the original timeline doesn't run again (article text doesn't fade in again) when pressing Text one title for the second go around...? Likely with an onReverseComplete... but not sure how this would cater for my timing requirements above. Only other thing is to try and find out why when Title one is almost back in its original position, it seems to glitch slightly - a slight jump before the end of the Flip sequence... and occasionally a bigger glitch - almost a flash of a line break between words 'Title' and 'one'. Is there a way of avoiding this jump at the end? As ever I'm not asking for much ?, and hope the above is clear enough!

? I'm a bit late to the Flip party... managed to get to a point with it... animating a title from small side menu to larger featured article text. Learning hat still very much on and down a little over my eyes... as ever though, the super clear docs/videos are helping! Clicking 'Title one' text flips into a headline and animates the article in. What I'm a little challenged by is how to make my back arrow reverse the flip and reverse the timeline. Can't quite piece together what I've read in other examples/contexts. Pretty sure it's an if/else to reparent and reset ready for the next title to work (or indeed for the Flip to animate again if title one is pressed again)? Have commented out my rough attempt at this. Hope that makes sense? Eventually I'd like to streamline things so that each title click relies on the same Flip function (likely using an array). For now I've only got button_1 (Title one) hooked up, with only article_text_1 animating in after the Flip, but I'll later expand it to more titles/articles.

Hi again, thought it would close this thread nicely to say I've found a solution that works for both issues - centring and Safari display. Ended up ditching the clip path method and went for a mask instead, along with @PointC's advice in another thread to ensure there's a rectangle in the SVG exported from Illustrator (guess we can't say AI anymore!). I then reworked the JS a little so the coordinates to morph to were managed in the tween rather than referenced from the HTML. Here's the result for anyone curious: https://codepen.io/matt-rudd/pen/abQdmrz Thanks again all for your help with this one! Definitely nudged me on towards a solution.

Thanks again @mvaneijgen - this is what I've been looking into doing. SVG masking and clipping is pretty complex, for me at least! ?

Hi @Rodrigo, thanks for the sound advice dude... Followed your advice (knew it would be a CSS issue at heart). I've centred the SVG and the video elements that get clipped (one overlaps the other [pos: absolute, z-index 0/1]) and I just can't seem to work out why the clipped word won't centre itself. Seems adding/removing a viewbox doesn't affect positioning. https://codepen.io/matt-rudd/pen/abQzLra SVG is centred in Chrome Inspect, as shown here, but need to get to grips with how the clipping affects its visible positioning. One for the scary realms of Stack Overflow though ?

Hi again, a few issues have cropped up when adding this section to my project: 1. Having clipPath issues with Safari. I've tried (now commented out) all the solutions referenced here, including all those listed in the thread linked below - adding a <rect>, onUpdate (although not sure I executed this properly) and webkit prefix. Also tried some Stack Overflow suggestions like adding filter: hue-rotate(0deg); to the clipped element. 2. The positioning of the SVG is a bit of a mess - I've managed to centre the SVG horizontally* in the .noise_container but can't figure out how to get it centred vertically so that it truly pins "center center". *Since managed to break the horizontal alignment, too ? Thanks as ever for any help! ? https://codepen.io/matt-rudd/pen/abQzLra?editors=1111

Fantastic... Echt heel erg bedankt @mvaneijgen!

Hey, I'm pretty pleased with the results of my first MorphSVG setup after following the great docs/digesting a few examples on here! The O --> U was a little tricky but got there in the end with some Illustrator experimentation. Would love to convert the SVGs into either masks or clip paths (whatever's easiest) to reveal a video for 'NOISE' and either an image or second video for 'MUSIC' but I'm unable to get this to work while maintaining the morph. Taking the 'NOISE' svgs out of their group enables clipPath on the video... and it looks like MorphSVG can still work with these paths even though they're in a <def>. So the next step is to get the clipping to work while morphing these clipping paths from NOISE > MUSIC - all at the size and central position of the morphing letter shapes. Unsure of the best way to do this? Hope that makes sense - true to form it's pretty late here! Thanks folks!