Any idea on how to Achieve this type of flip card animation ?

[Chrisdag21]

I'm trying to achieve this exact same flip card animation upon click as the Pokemon website. The cards should flip, enlarge and center in the middle of the screen exactly like this => https://tcg.pokemon.com/en-us/galleries/temporal-forces/#seeall 

 

Any ideas if and how I can achieve this with GSAP?

[GSAP Helper]

Hi @Chrisdag21. Welcome to the forums!

 

Sure, that's all doable with GSAP. It looks like just doing calculations to apply transforms to center the element in the viewport, and then they get rid of the scrollbar, probably by setting overflow-y (CSS). The mouse follower rotation effect is more complicated, but very doable. 

 

Unfortunately we just don't have the resources to provide free "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer - we just want to manage expectations.  

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[trieuvy]

You can search for this animation using the keyword "Apple TV parallax."
Some examples you can check out:

See the Pen WzKBpE by iremlopsum (@iremlopsum) on CodePen

See the Pen MaByJa by thomasxiii (@thomasxiii) on CodePen