Loops, Opacities and Building Layers in Code. When you click on the purple containers, they will change to a different color of the same opacity as its parent.
State Cycle. States. Default Animations. Used Framer's Fiber UI Kit as the basis of this prototype. When you click on the green toggle, it will animate on and off.
ScrollComponent and FlowComponent. Used Framer's Wireframing Kit to create this prototype.
You can click on the hamburger menu at the top right. This overlay menu will slide in from the top of the page. You can click on the "X" button to close the overlay menu. You can also click on the first card which opens the video player from the bottom.
PageComponent. Used the PageComponent to turn three artboards into a set of 3 pages. You can easily swipe through each page in an interactive prototype
States. AnimationOptions. Used Framer's States Example to develop an animation that shows a transition between text and imagery.
Click anywhere on the screen to try it out.
States. AnimationOptions. stateSwitch. Used Pablo Stanley’s Crash Course to create a floating action button like Material Design. I used Framer's icon library and code to switch between two states with a spring (bouncy) curve.
Click on the plus (+) button to access the camera, video and microphone buttons.
ScrollComponent. ScrollToPoint. Used Framer's Fiber Kit to create a flow that shows what happens if you apply momentum and spring physics to scroll movements.
Scroll through the status updates. Tap on the phone status bar which will make the feed go back to its original spot.
Flow Component. Used Framer's Fiber Kit to create a flow that shows how onboarding would work using the Flow component to transition and navigate between multiple screens. It’s built on two basic functions: (1) showNext to transition to a new layer, and (2) showPrevious to cycle back through previous layers.
ScrollComponent, Intervals, and Loops. Used Cordova’s Comprehensive Guide that features a series of quality instructional videos. You can horizontally scroll through the Swim, Run and Cycle actions. When you click on an action, the progress bars will incrementally animate and generate a success-notification sound.
ScrollComponent that also generates data. Drag the metrics down and you'll see how data is returned.
