Forum Discussion

JamesYorke-fe8a's avatar
JamesYorke-fe8a
Community Member
22 hours ago

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

advice
e-learning development
storyline 360

1 Reply

  • Nedim's avatar
    Nedim
    Community Member
    7 hours ago

    I’ve attached the .story files for you to review. There are two versions inside:

    1. Slide 1 — 2D Flip (scaleX method)
      This slide uses scaleX to create a simple 2D flip illusion.
    2. 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.