Animated Blur Cards with React Native (Skia)

Building custom lists is always fun. In this tutorial, we'll discover how to achieve a Story List UI animation by using just React Native Reanimated.

My React Native course: https://reanimate.dev
Shared 100+ Animations on Demos: https://reactiive.io/demos
Twitter: https://twitter.com/reactiive_

Recommended tutorials before this one:
- Custom Animated Loader with Skia: https://youtu.be/7pCiGUrJuow
- Exploring Interpolate: https://youtu.be/8_hvNoZJsc8

Source code: https://github.com/enzomanuelmangano/exploring-skia/tree/main/blur-cards

Chapters:
00:00 Introduction
00:46 The background RadialGradient
05:38 Here's the plan
06:55 Handling the initial state
09:35 The 3D state (end state)
15:58 The Blur effect
20:55 Fixing the Cards z-index
22:12 The animation (Finally)
26:24 Final touches

Тэги:

#react_native #reanimated #animations #react_native_animations #app_development #gestures

Скачать видео