Forum Discussion
Flip Cards using GSAP - help with resize position
I’ve attached the .story files for you to review. There are two versions inside:
- Slide 1 — 2D Flip (scaleX method)
This slide uses scaleX to create a simple 2D flip illusion. - Slide 2 — 3D Flip (rotateY method)
This slide uses rotateY for a true 3D card-flip animation.
Please examine the code in both slides and test them across multiple devices: mobile, tablet, and desktop. Check whether there are any differences in positioning and alignment. It uses less code and is more efficient. I also fixed your original interaction by grouping the front and back elements together, which resolves the positioning issues.
- Slide 1 — 2D Flip (scaleX method)
I’ve attached the .story files for you to review. There are two versions inside:
- Slide 1 — 2D Flip (scaleX method)
This slide uses scaleX to create a simple 2D flip illusion. - Slide 2 — 3D Flip (rotateY method)
This slide uses rotateY for a true 3D card-flip animation.
Please examine the code in both slides and test them across multiple devices: mobile, tablet, and desktop. Check whether there are any differences in positioning and alignment. It uses less code and is more efficient. I also fixed your original interaction by grouping the front and back elements together, which resolves the positioning issues.
Thank you! looks like this works, I didn't realise grouping the front and back together would fix the positioning issue - was there anything else you did to help this?
Thank you again for your time on this, much appreciated!