Forum Discussion
Flip Cards using GSAP - help with resize position
Hi all I thought I had figured out how to create nice flip cards using GSAP, all works well until I resize the window or rotate the screen on a mobile device and the cards positions go wrong.
I think this is to do with GSAP X and Y properties but I don't really know where to start unpicking this or understanding what else i need to add, can anyone help please?
File attached for ref
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)
6 Replies
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.
Although I've seen some people mention this new feature, it seems the Named Trigger is not available in all regions. Neither the latest standard nor beta updates offer this for me. As a result, your NR project cannot be opened by everyone.
Nathan_Hilliard the name trigger is included as part of the AI animations (the AI names it's triggers), but I found it buggy and sometimes files I couldn't open the files sometimes, but being persistent it would eventually open
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!
- Slide 1 — 2D Flip (scaleX method)
