Building State Based Swipe-In Animations in React
Playing with phase based animations
Recently, I have had more time to play with frameworks and languages that I had been leaving on the back burner. A buddy approached and asked me for some assistance with their website. Specifically they wanted me to do an animation deck that typed out text on the screen and swiped in relevant images. The final product and what I plan to go over in this article is shown below.
My focus in this article will be setting up the animations and programming the interactions between them. I assume the reader already has some experience in ReactJS and installing NPM components, so I will be skipping boiler plate content in this piece. Feel free to follow along by cloning the Github repository at the end of this article.
Components
This animation can be broken up into two main sections. First we have the rotating text portion, that moves between words. For this portion I used adrianmcli’s package. The package simplifies this animation and includes convenient callback functions that will be important for interfacing with the right side animations. This animation…
