laurentplenet

Hey GSAPers! Im trying to achieve a DJI Mavic 3 like animation (https://giphy.com/gifs/hf3oNBhJNCBbRePt9x/fullscreen that you can see there: https://www.dji.com/fr/mavic-3-classic?site=brandsite&from=nav) but dont know where to start! I've saw something like https://codepen.io/akapowl/pen/jOZVrZM but its not exactly the same base point because in this case the images would be inside the panel, not overlay one by one ... Did you guys knows How I can achieve the exact same animation ? (sticky image content, but vertical images overlays...?!) Thanks for your help !

Thanks for your help, I finally found out the solution for the « In » transition : https://codepen.io/laurent-pnt/pen/zYzzzMo same for the « Out » transition : https://codepen.io/laurent-pnt/pen/XWggowE I merged the both in one through my js and it works perfectly.

@CassieThanks for your reply, clip path is not what I need because (take a look at https://bounds.agency/) there's a morphing shape for the menu reveal... What I need (but can't achieve) is my exactly like my codepen ( https://codepen.io/laurent-pnt/pen/wveeywz ) but, without the blue part (the blue part is supposed to act like a mask I could say...) in my codepen I've got the same result than bouds.agency but instead of seeing the website (my red part) I see the blue part... Am I clear enough ? ^^

Thanks/Merci @nico fonseca for your reply, In fact, thats not quite like your exemple, what Im trying to achieve is exactly this (in my codepen) : https://codepen.io/laurent-pnt/pen/wveeywz but considering that the blue part should be red (transparent)... Did you got any idea... ?

Hello! I would like to have some help please about using GSAP & Morth, I'm trying to achieve some animations using GSAP & svg morphing to get something similar to https://bounds.agency/ (the menu reveal animation when click on the top right burger)... By now, all I get is : https://codepen.io/laurent-pnt/pen/wveeywz In my version, the blue shape it not revert like it should be (like the exemple)... Please I need help!