• Features
  • Resources
  • Blog
  • Education
ringMask Made with Flow.
downArrow Made with Flow.
upArrow Made with Flow.
ring Made with Flow.
Get Flow
  • Features
  • Course
  • Tutorials
  • Docs
  • Blog
  • Education

Flow Tutorials

These Flow tutorials will teach you the steps of working with Flow to animate your sketch files and export production ready code and assets.

sketch

Align and Distribute Keyvalues

Learn how to align and distribute key values and animations in Flow using a Sketch file of the Sketch logo in this animation tutorial.


twitter

Rotation, Scaling and Easing

Learn simple animation techniques for rotation, scaling and easing to bring the Twitter Logo to life using a Sketch file and Flow.


skype

Creating a Multiple Rotation Effect

Learn how to create a multiple rotation effect that you can set up beforehand in Sketch before animating with Flow in this tutorial animating the Skype logo.


vimeo

The Value of Anchor Point Rotations

Learn to work with and the value of anchor point rotations in this simple tutorial, showing you how to lovingly animate the Vimeo logo in Flow.


codepen

The Concept of Tracing Shapes

Learn the concept of tracing shapes in Flow, while you build a nice animation from a Sketch file of the CodePen logo.


dribbble

Advanced Tracing Animations

Learn advanced tracing animation techniques, by coordinating the tracing of shapes by aligning their timing and rotations in this Dribbble animation tutorial.


github

Scale Multiple Objects

Learn to coordinate the scaling of multiple objects, and learn some visual tricks while animating a Sketch file of the Github logo in Flow.


orbitEasingAnimated

Create an Orbit Using Easing Curves

Learn how to create an orbit animation using easing curves and offsets for the X and Y positions of a layer.


shapeMorphAnimated

Shape Morphing

Learn how to morph between shapes by prepping them properly in Sketch.


hoverMaskAnimation

Animating a Toggle Button with Group Masks

Learn how to use group masking to create a reveal effect.


numberCounterThumbnail

Animating a Number Counter

Learn how to animate a number counter using text and the masks to bounds property of a group.


launchAnimation

iOS Launch Screen Animation

In this tutorial we will create an iOS launch screen animation with Flow and integrate it into an existing Xcode project.


LaunchFirstFrame

Create Launch Animations With Content on the First Frame

Learn how to properly set up your Xcode project so the launch sequence syncs with the first frame of your animation.


flowGestures

Using Flow with iOS Gestures

Learn how to use Flow with IOS gestures by integrating 3 timelines into an IOS app and triggering each with a gesture.


happySaveButtonPoster

Learn Core UI Concepts with a Happy Button

Learn how to take a Sketch design comp and create a playful animation in Flow.


checkMarkAnimated

Export Custom Button for iOS

Learn how to turn your Flow animation into a custom iOS button.


LaunchAnimationHeader

Export Launch Animations for iOS

Learn how to turn your Flow animations into an iOS launch animation.


onboardinganimation 2

Export Onboarding Animations for iOS

Learn how to turn your Flow animation into an iOS onboarding animation.


checkBoxes

Prepare a Sketch File | Check Box (1/3)

Learn how to prepare an existing Sketch design, then restructure and rename its layers and artboards to be animatable in Flow.


checkBoxes

Animating Your Design | Check Box (2/3)

Learn how to structure your Flow file and create clean timelines that you can import easily into an iOS project.


checkBoxes

Export & Integration | Check Box (3/3)

Learn how to export multiple timelines from Flow and integrate them into a single iOS project.


Subscribe to our newsletter

Love UI Animation? Sign up to receive the latest news, articles, tutorials and resources.

We're diligent and don't spam.
Create With Flow

Flow

  • Features
  • Education
  • Get Flow
  • License Manager

Company

  • Contact
  • About
  • Build With Us

Learn & Ask

  • Resources
  • Tutorials
  • Docs
  • Blog
  • Vimeo
  • Youtube
  • Slack

Et Cetera

  • FAQs
  • Legal Terms
  • Releases
  • Inspirations

Copyright © 2015-2023 JABT Labs Inc.
This Project is Generously Supported by the Canada Media Fund and Slant.

background Made with Flow.
underscore Made with Flow.
line2 Made with Flow.
line1 Made with Flow.
circle Made with Flow.
hit Made with Flow.

result(s) found for “”.