GSAP Flip flexbox contents jumping (CodePen included)
Hey guys, I'm trying to create an interaction where when you click one of the menu items, it moves to the top of the page (using GSAP's Flip plugin). The issue I'm having however is that since I'm appending it to the
.flip_container as I've seen in the GSAP docs, it disrupts the flow of the .menu_wrapper. Which makes sense of course, but I'd like each of the remaining items in the .menu_wrapper to stay where they are.
Here is a Codepen where I've recreated the issue: https://codepen.io/chigggsy/pen/dyLaNWw4 Replies
@Chinmay is this the behavior you're looking for?
https://codepen.io/learyjk/pen/eYoxydP
not sure how you want to handle the 'ghost' element here
Ahhh that's really interesting! Thanks man. I'm only using it during a page transition so the ghost element can just be the way you've got it tbh.
Just a question, I'm not understanding how it knows the correct index position of the selected h3, instead of putting the ghost item at the bottom of the array when appending?
Ohhhh wait I figured it out. You're identifying it through the item that's being looped over/clicked on.
Yup! look at what comes before the
. on .querySelector. We can select off other nodes instead of just document