This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Jacky Lee
Posted Jun 01 - Read on Facebook

Hello! Me again, sharing another little module, hopefully some of you may find it useful.

This module will take in 4 parameters:
1. Front image
2. Back image
3. Perspective
4. Flip animation curve
And create a flip card that flips when you click it.

Module + Example project here:


Jordan Robert Dobson

Are you saying you're having trouble passing the string in as a parameter?

Jacky Lee

Jordan Robert Dobson yea, I tried #{} approach but still gave me errors :(

Jacky Lee

Ideally, I'd love to do flipCard(frontLayer, backLayer, 1600, "spring(300,20,0)")

Jordan Robert Dobson
Jordan Robert Dobson

^ There you go!

Jacky Lee

Jordan Robert Dobson omg how did I miss that?! haha thank you so mucho

Jordan Robert Dobson

No problemo. :D


thank you! :)

Michael Dravnieks

Thanks guys, this community is the best.

Joey Wu

you're a lifesaver!

Jupiter St John

Sweet! You are awesome! Thanks a million

Mindy Nam

Hey Jacky, I ran into a problem while implementing your module. My back image has a button and after using stopPropagation() to separate the clicking of the button to clicking the card, the card front won't respond to taps in the button area. Do you have any idea how I can get around this? you can see the prototype here:

Jacky Lee

Sorry Mindy I'm not anywhere near a computer right now so cannot troubleshoot for you. Jordan Robert Dobson is an expert maybe he has an answer to that? :)

Yuhki Yamashita

Mindy, one quick workaround would just be to check the state of the card before you execute stopPropagation(). So, for your resume button on-click event handler, something like: if dex_front.states.current == "front", then return (i.e., if the card is on the front side, make the button, which is invisible to the user, a no-op).

There are also ways you could tweak Jacky's framework, too. For instance, you could have the click event handled not by the card container but by the front/back sides of the card individually, and switch the z-index of the two every time the card flips so that you never have to worry about click events on the invisible side of the card.

Or, instead of using opacity, use something like scale so that the hidden side is inaccessible (though in this case, you may have to sequence things properly so users don't see the scaling animation).

Hope that helps!

Mindy Nam

Thanks Yuhki! The if statement worked perfectly.

Read the entire post on Facebook