Hero Animation Tutorial in React with Framer Motion (Tap to expand card)

Animation tutorial showing how to achieve a tap to expand UI transition between two states, a detail and a full screen view. This tutorial will focus on how to achieve this effect with Framer Motion by using the useCycle react hooks to cycle between the two UI states we want. The cards represented within the phone viewport can be swiped left or right to swap between (this scrolling effect is achieved using CSS snapping and no JavaScript) them and tapping a card will expand it to take up the whole screen. We’ll also look at how to adjust the transitions to fine-tune the effect we want with varying duration and easing modes. The base of the project is a create-react-app with some basic CSS, follow along – I’ll add the source code too.

#pagetransitions#javascript #webdevelopment #reactjs

Source code:
https://github.com/Darth-Knoppix/ui-animation-tap-card

Demo:
https://tap-expand-fm.sethcorker.com/


🐦 Follow me on twitter:
https://twitter.com/Darth_Knoppix

πŸ“ Read my blog:
https://blog.sethcorker.com/

πŸ‘¨β€πŸ’»Join me on the DEV community:
https://dev.to/darthknoppix

πŸ“° Read my articles on Medium:
https://medium.com/front-end-field-guide

πŸ™ See my public code on GitHub:
https://github.com/Darth-Knoppix


If you have any suggestions for new tutorials, leave a comment, tweet me or see if you can send it to me telepathically.

Subscribe to my channel for more tutorials helping you to craft cool user interfaces on the web with all the tools which are available from JavaScript, CSS and HTML to specific web APIs. I cover Framer Motion and React libraries in-depth so you can learn how to achieve animations on the web and build more intuitive web apps.

Post Author: hatefull