The goal of this project is to get familiar with Reanimated V2 API. We decided to create a challenge to grow our skills. Feel free to join and play with the greatest React Native animation api so far.
Schedule
we meet every two Tuesdays at 16:30
you have two weeks to complete animation
under special circumstances the challenge can be postponed
for up-to-date information visit react-native slack channel
you should put your code to your personal directory /participants/[your_name]/[animation_number_and_name]
you should modify src/constants/paths.ts file accordingly to have your new animation listed
do not modify any files out of your personal directory or the paths mentioned above
do not modify others work
create your own directory in /participants if it does not exists yet
do not cheat - we will review and talk about problems every two Tuesdays
have fun
Prizes
We will review all projects together and choose the best solution / design / code quality project
5 kudos from TL
kudos rain from each participant
[1] Week 1 - BB - Pump me [FINISHED]
Start
14.09.2021
PR
27.09.2021 16:30
End
28.09.2021 16:30
Who
BB
Next animation challenge
Bob
Winner
BB
Goals
Create rounded touchable element r=40
Handle touch animation
When you press element should become bigger, to max 90% of screen size (animation should be smooth)
When it has max size change its color to any other than initial and display somewhere text "Stop it! I'll explode in a moment"
When you release element should go back to its initial size (animation should be smooth)
When you press again when its size decreases, animation should start from its current size
Create PR and mark all other participants as reviewers
[2] Week 2 - Bob - Tomato catapult [FINISHED]
Start
29.09.2021
PR
12.10.2021 16:30
End
12.10.2021 16:30
Who
Bob
Next animation challenge
Gosia
Winner
k1eu
Goals
Create smaller "wall" View with gray color with 80% of width and height
Create a horizontal brown line across the screen
This should be touchable (react-native-gesture-handler)
Upon swiping down it should bend - bend animation should follow finger
On tearing a new potato should be placed under finger
On release potato should fire and smash on the wall
Position where tomato land on a wall should be random
[3] Week 3 - Gosia - Stickers
Start
13.10.2021
PR
09.11.2021 11:30
End
09.11.2021 11:30
Who
Gosia
Next animation challenge
matro
Winners
BB, Bob, k1eu, Gosia
Goals
Create "sticker store" at the bottom of the screen
Make it possible to drag and drop stickers across screen
Last placed sticker should be on top
Add sticking and unsticking animation
When draging sticker, add shadow indication that it is in the air.
(Optional) Add possibility to draw on screen in different colors. Lines should be show below stickers
[4] Week 4 - matro - Curling
Start
16.10.2021
PR
30.11.2021
End
30.11.2021
Who
matro
Next animation challenge
k1eu
Winner
BB
Goals
Make a simple curling game with one target point placed horizontally in the middle of the screen and vertically 20% height from the top (2D view from above the game field)
There's a horizontal "throwing line" at 20% screen height from the bottom of the screen
You have one kettle (alright... it's called the stone as wikipedia claims) to throw at the target
The throwing line separates the bottom "aiming field" from the upper "target field"
You can control the stone with your finger only while it's on the aiming field
When the stone crosses the throwing line, you lose control over it and the stone continues the travel up on the target field based on the force that you gave it releasing it
The stone should gradually lose speed based on the amount of initial speed given on release
When the stone stops, you calculate and display the distance from the target
1 second after stopping on the target field, the stone is being reset back to the aiming field
[5] Week 5 - k1eu - Apartment's swipee
Start
06.12.2021
PR
21.12.2021
End
21.12.2021
Who
k1eu
Next animation challenge
damcyk
Winner
BOB
Goals
Make a bottom tab navigator with main Apartments View
Create Aparments Card slider with where both previous and next cards are visible (just a little)
When the user swipes, next card should go to the middle and scale just a bit
When the use clicks there should be an enter in animation which connects with the previous screen (so it looks smooth :sweetJesus:)
Optional (gif 1)* - Create a view that rolls out from below the tab navigator (we can call it My favourites - content doesn't matter)
Let's experiment with animations to play with illusion of elastic bouncing balls that can be used for various toggle elements or loaders
Create 4 variants of balls jumping in a row next to each other
1st red ball should jump with no shape transformations of the ball AND with constant speed
2nd green ball should jump with no shape transformations, BUT accelerating the closer to the floor level it is (imitating gravity)
3rd blue ball should jump with shape transformation (squashing horizontally when hitting the floor level and stretching vertically halfway between highest and lowest points of the jump), BUT with constant speed
4th black ball should both dynamically change shape AND speed imitating elastic jumping ball
Balls should be jumping next to each other in line at the 1/3 view height (highest point of the jump at 2/3 vh)
