cssfrontendcss-animationsadobe-xd

imitate XD's "snap" animation using css transitions


In this video is a prototype made with Adobe XD. https://i.sstatic.net/Scrvo.jpg

I am trying to reproduce the "Snap" animation used to make that effect soft bounce in css but i cant get it just right.

Here is my attempt: https://jsfiddle.net/etw3qy48/2/

transition: all 0.3s cubic-bezier(0.68, -0.30, 0.265, 1.30);

I need help reproducing the soft bounce animation (AKA "snap" in XD) as seen in the video with css.


Solution

  • Looking at your fiddle and the video, the only real difference I see is that your animation bounces both on start and on end, when you only want it to bounce at the end of the transition. Firefox has a really cool transition cubic-bezier editor, this is what I came up with:

    transition: all 0.3s cubic-bezier(.18,.89,.45,1.36);