Slimy

Learn React Native animations in a fun way! Contribute with your creative animations to show all the possibilities!

Overview

The idea of this training is to introduce the basic concepts of React Native animations with the Reanimated 2 library in a fun way.

Let me introduce you to who will be our loyal companion throughout our journey. This is Slimy!

Slimy is a 150x150 view. As simple as that. Maybe some styles here and there, but in the end it is just a view, because the goal of this training is to learn how to animate components that we'll use every day. You can customize it however you want, color, border radius, whatever. It’ll be the base for our project.

We'll use the basic concepts of animations to bring Slimy to life.

Get Started

Slimy runs on an Expo app. To get started, clone the repository and run the following commands:

npm install
npm start

Then get Expo Go on your phone and scan the QR code that appears on the terminal. You can also run the app on a simulator.

Go into the "My Slimy" screen, and jump into src/components/Slimy.tsx to complete the challenges.

Challenges

You can now find the challenges in the docs.

We'll organize the key concepts of animations in five challenges. These challenges were created to try and cover most of the concepts you'll need to create any animation you'd like, but the animations presented in each one are not very complicated. The idea is to use the challenges to learn and then be able to implement more logically complex animations that use those same core concepts.

CHALLENGE 1: Eyes wide open

Key concepts: Shared values, interpolation.

https://user-images.githubusercontent.com/80724668/187310363-723a6ce0-512a-418c-8902-fcde84afd69b.mov

CHALLENGE 2: Move it

Key concepts: Gestures, gesture handler

https://user-images.githubusercontent.com/80724668/187310476-d70ffc08-1752-478b-b28d-761209667654.mov

Optional:

https://github.com/carozo/slimy/assets/80724668/b5f49b6a-5ab9-4b4e-9115-dc048553ef34

CHALLENGE 3: Boundaries

Key concepts: Clamping, animations (handlers)

https://user-images.githubusercontent.com/80724668/187310576-f6cf041b-3428-4989-94b2-c34346e66945.mov

CHALLENGE 4: XLimy

Key concepts: SVG animations, animated props

https://user-images.githubusercontent.com/80724668/187310792-e7a975b7-553e-46cf-aec5-9f3f54022610.mov

CHALLENGE 5: Drop

Key concepts: Communication between UI thread and JS thread

https://user-images.githubusercontent.com/80724668/187310893-69f28b75-c18a-4944-a3b8-3d3629536152.mov

CHALLENGE N: Last challenge!

I encourage everyone to try to put into action the Reanimated concepts and create their own creative animation!

My contribution:

https://user-images.githubusercontent.com/80724668/187311169-f5965d2c-0594-4fee-bb03-7b571e7d7ad8.mov