cardflip template.zip (355.2 KB) Here is my First template to share:
Card flip animation.
It uses 2 scenes but could easily be put into a timeline or made into a symbol
The trick is to switch your image at just the right angle in the animation to get the sense of a card flip
Enjoy!
Nick
I’m loving this! I’m wondering - because I couldn’t easily tell from your template, how did you change the image for the flip? I’m building a card flip educational activity and am currently grouping all the information and using opacity to get the same effect - but yours looks like it’s a two sided image right out of the gate.
Actually what I am doing with this is using the Background image property to swap out the image at just the right moment when the card is flipping.
See timeline below…
I put this on the second scene but you could also do it on one scene and launch with a timeline action.
When animating scrub the playhead through the animation to find the exact spot where the flip should take place.
This also works great for book pages or flipping on the X and Z axis as well.
Hi, this is a great solution. I have tried it and it works.
However when you make the page wider (say 4000px instead of 400px, the animation no longer functions correctly. It becomes elongated. As the animation runs through it becomes much wider and then returns to the correct size. Is there a way of mitigating this if used on a much wider page?
You may need to adjust the origin point for transforms: Tumult Hype Documentation (Scroll down to Transform Origin)
Ok, thanks Daniel. I will look at that. It just struck me as strange that the animation changes just because the page is wider.
The animation changes because 3D rotations make use of perspective. The perspective origin is the center of the scene (this is the HTML default), so as the scene grows items around the edges show more perspective warping.
You can have a stable perspective by placing the element in a group.
Oh, so simple. That work perfectly. Thank you so much Jonathan!
