4

React Native Animations Workshop

 1 year ago
source link: https://reactnativeexample.com/react-native-animations-workshop/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

React Native Animations Workshop

Hi! This is the collection of Animations I created with React Native/Expo. This repo contains pretty interesting ways how you could animate the views while preserving 60 FPS.

Run the app with Expo

MorphSlider

68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f5842524174555749434b4a457067504a4b452f67697068792e676966
  • Morph SVGs
  • Animate LinearGradient
  • Custom Slider

3D Menu

68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f67677a754d6b576f3932616e52527133786b2f67697068792e676966
  • Transform Views in 3D Space
  • Translate Menu Button

Login Animation

68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f65687955767a613446646568786c777067622f67697068792e676966
  • Custom Ripple Animation
  • Translate and Fade out input fields

Balloon Slider

68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f6b644b68467434626642434b55457657354c2f67697068792e676966
  • Synthetic Balloon mimic tension
  • Slider implemented with ScrollView

Add to cart Curve Animation

68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f647866646479736f666c43374c4f653967522f67697068792e676966
  • Bezier Curve Animation
  • Scale Animation

GitHub

View Github


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK