This repository contains all the front end code for the current littlemilk.studio website and the toolset required to build it.
In order to have control over page transitions and other aspecs of the website, this project uses React.js & React Router 4 with Redux & Reselect for state management.
This project seeks to explore animation in React apps. Animations fall into two categories, Stateful & Reactive. We explored these concepts thoroughly and describe what they are and how they're accomlished in our app below.
Disclaimer: If not familiar with functional based programming practices, you should be fine to understand stateful animations, but recommend catching up on some of the core concepts before looking into reactive animations. An excellent tutorial can be found Here by MPJ of Fun Fun Function. Also MPJ has several videos on Dependancy Injection which I found quite useful for composing pipelines for reactive animations.
Stateful Animations tween states in the app and are accomplished through the heavy use of react-pose in this project.
A common example of stateful animations are CSS transitions, where a state is represented by adding a class to an element and that state can cascade to child elements allowing them to transition properly to the new state in the app.
The main constraint with CSS animations however, is that they often don't suffice for the robustness needed for certain animations. It's more of a challenge to make the properties the new state depends on dynamic in such cases, not to mention the lack of beautiful easing functions!
The main aspect of stateful animations to note here is that stateful animations, although transitioning to a dynamically generated property, transition to a static,single value for each respective property. If the property is however frequently changing and better represented as a stream of values rather than a change in state, we look to reactive animations!
Reactive animations are needed to animate an element who's properties (or property) depend on a stream of values. This case is mostly seen when an elements property is dependant on events like mousemove, scroll, or touch based gestures. In this project we originally looked to react-pose because of its declaritive syntax and ease of use for react integration, but soon found we needed the robustness of popmotion to suffice our needs.
Through repeated use on multiple components, we a quickly saw a pattern emerging in our reactive animations. This pattern basically consists of state defining what streams we should listen to, how we should augment those streams to transform DOM events into the required properties, then how we should animate our component to that property.
In this project we essentially used reselect to derive a finite automata (fancy wording for reducer) from our state to pass into our component. This derived state was handled in a component local reducer which dispatched what streams the component should bind to.
This project also heavily used reselect, and the functional programming utilities in popmotion, to compose pipelines derived from the application state. This allowed for the stability of redux, but also the ability to dynamically generate stream transformations depending on the application state.
Currently using popmotion's physics and value features for lerping to a derived value. Looking to possibly implement custom lerping for potential performance & visual benefits.
Ben Lesh, lead of RxJS, has a great video on accomplishing reactive and stateful animations with RxJS. We're looking at incorporating them into our next project and hope RxJS provides better support and control over reactive animations, but will likely stick with react-pose for most stateful animation use cases. Watch Ben Lesh's talk here.
- Mobile support
- Server Side Rendering
- Code Splitting
- Further Performance Optimizations
- Globby Ball of App State
- Contact Form Page
- 404 and Device Support Redesign
- Preloader, Maybe Drag Intro Tutorial
- Architecture Used
- Modified Build of react-redux-starter-kit to work with Webpack 4
- Page Transition Example
- Constraint Motion Example
- Aristide Benoist Easing Functions