Cardflip effect

As part of my reusable animation someon asked for a ‘cardflip’-animation.
If you search the Internet you find dozens of solutions. Most of them work well for modern browsers, but misbehave in IE. So i made a setup that does work swell on IE too..

Have fun with it..

Math

Preview image

Tags:

Comments

  1. Profile photo of Kevin Stagg
    Kevin Stagg

    Very slick! Thanks Math!

    Question for you – have you seen anything like this in Lectora – where the screens fly in from the side?
    https://publish.samsungsimulator.com/simulator/75181773-8f8a-4fc6-a319-89988dafe123/#!top5/basic_functions/set_up_samsung_pay

    Go through the short “click” material and you’ll see what I mean. The click-action part I know how to do. The visual effect? Not so much.

    Thanks in advance. Any tutorials out there that do this? I know how to do this in Cp, but not in Lectora unfortunately.

  2. Profile photo of Math Notermans
    Math Notermans Post author

    @kstagg The screens flying in from the side is quite easy to do in Lectora. You got a few options to realize that. Either use a transition onShow. One of the Lectora transitions is Fly. That one you can use to get the effect desired. Downside for Lectora transitions is, that you cannot control them exactly. The sliders give you some control, but i tend to find it quite limited.

    Personally i use GSAP’s Tweenmax a lot for this kind of animations. Perfect controllable and a lot of tutorials around to get things done. These examples show that quite well:
    https://codepen.io/GreenSock/pen/lEiAv
    https://codepen.io/GreenSock/pen/hbCir

    For your ease i will mockup a quick sample like the samsung-simulator…

    Regards,
    Math

Your email address will not be published. Required fields are marked *