The Power of Interpolation

on YouTube ↗28m

" summary

Claims that React Native’s Animated module makes complex UI motion declarative and performant, using Animated.event to map scroll or playback numbers to an animated value, then interpolate to define exact mappings (example: offset 0 → header 200, offset 300 → header 98). Shows a working media player with synced note-highlighting and a collapsing header, runs at 60 fps natively, and replaces messy imperative branches—author notes it avoids the “five if-statements” trap and actually works.

AI-written summary · about

" chapters (6)

1. 0:00Introduction
2. 1:40Background
3. 10:35Scroll events
4. 13:58Performance issues
5. 14:59Interpolation
6. 18:25Power of Interpolation

" related talks

• 30mMicrointeractions & Animations in React Native: Help users understand the UICatalin Miron · React Day Berlin 2019
• 23mAnimatedChristopher Chedeau · React Rally 2015
• 28mDemystifying complex animations creation process in React NativeVladimir Novick · React Native EU 2018
• 31mAnimations in React NativeFreddy Harris · Best of Web 2019
• 32mAnimations Should Be FunCatalin Miron · App.js Conf 2022
• 46mAnimations in React NativeNiya Panamdanam · Connect.Tech 2021
• 10mReact Native, your UX superheroNoemi Rozpara · React Alicante 2019
• 25mReact Native <3 60FPS -- Improving React Native animations>Krzysztof Magiera · ReactEurope 2016