Mattrudd Posted January 15 Share Posted January 15 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: See the Pen PoLWQdb by matt-rudd (@matt-rudd) on CodePen Hope that makes sense... I'm stretching my knowledge as ever! Any big or small nudges in the right direction greatly appreciated 😬. See the Pen XWGpZdE by matt-rudd (@matt-rudd) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted January 15 Share Posted January 15 Hi, Sorry but your demo is a bit far from being minimal and I don't have time to go through all that in order to find what could be the issue. Instead I created a minimal demo that is close-ish to what you're doing that shows what I believe you're trying to achieve: See the Pen xxBgWyO by GreenSock (@GreenSock) on CodePen Remember that this is an approximation to what I think you're trying to do. You can only click on the active element (white border) which will Flip to a full screen display. Inside the doFlip method you can add other custom logic in order to play/stop the video, etc. Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Mattrudd Posted January 16 Author Share Posted January 16 @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! Link to comment Share on other sites More sharing options...
Mattrudd Posted January 16 Author Share Posted January 16 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... See the Pen BabWoeP by matt-rudd (@matt-rudd) on CodePen 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! Link to comment Share on other sites More sharing options...
Rodrigo Posted January 17 Share Posted January 17 Hi, Basically this logic is not running as you expect, see the comments: function flipToNewContainer(video) { let state = Flip.getState(video); newContainer.appendChild(video); Flip.from(state, { duration: 1, ease: "power2.inOut" }); } function flipBackToOriginalParent(video) { // THIS NEVER RUNS console.log("FLIP BACK") let state = Flip.getState(video); video.originalParent.appendChild(video); Flip.from(state, { duration: 1, ease: "power2.inOut", onComplete: gsap.to(".vid_flip_container", { background: "rgba(0, 0, 0, 0.75)", duration: 0.5, delay: 0.25, ease: "power4.inOut" }) }); } stackItems.forEach((stackItem) => { stackItem.addEventListener("click", () => { let video = stackItem.querySelector(".video_block"); console.log(video); // -> null NO PARENT NODE HERE if (video) { // ALWAYS FALSY if (video.parentNode === newContainer) { flipBackToOriginalParent(video); } else { flipToNewContainer(video); } } }); }); IMHO you are over engineering this quite a bit. My advice would be to get the Flip logic working as expected first and then add the extra hundreds lines of code for the Observer animation. The logic for the Flip animation in both directions should be a simple one like the one I had in the demo I linked in my previous post. Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Mattrudd Posted January 17 Author Share Posted January 17 Thank you! I've just been doing exactly that - stripped it right back. See the Pen mdoWMZv by matt-rudd (@matt-rudd) on CodePen 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! Link to comment Share on other sites More sharing options...
Rodrigo Posted January 17 Share Posted January 17 Hi, Since you're adding/removing this class to the video element, use that to increase the z-index of that element: // After expanding Flip is complete videoBlock.classList.add("isFlipped"); // After Flipping back to normal is complete videoBlock.classList.remove("isFlipped"); .vid_flip_container { /*...*/ /* This z-index value has to be less than the isFlipped class */ z-index: 100; } .video_block { /*...*/ /* Add a position property to the element */ position: relatve; } .isFlipped { z-index: 110; } That seems to work the way you expect: See the Pen OJqpQWP by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now