All Examples

Details view animation

List item to detail view animation

Read full example

Cube transition

A neat 3D transition between two screens

Read full example

Sticky headers

Learn how to use UX expression functions to make sticky headers.

Read full example

Code input

How to create a segmented code input control

Read full example

Interactive infographic

Playing with PageControl and PageIndicator to implement an interactive infographic.

Read full example

Endless scroller

An endless feed that appends more items as the user scrolls near the bottom

Read full example

Fitness app concept

Fitness app concept with a brutalist design

Read full example

Material transition

A neat material design card animation

Read full example

Pan- Zoom- and RotateGesture

How we can use PanGesture, ZoomGesture and RotateGesture to allow direct interaction with an element.

Read full example

Material sidebar

Using EdgeNavigator to build a sidebar

Read full example

LoadingIndicator

Creating an animated loading indicator while using the BusyTask API.

Read full example

Custom toggle control

How you can use SwipeGesture to build a custom toggle control

Read full example

Empty state

Easily present a message when there is no data to display

Read full example

WhileBusy

Using the WhileBusy trigger while loading large images

Read full example

Parallax pages

Pages with a sweet parallax effect

Read full example

Radio buttons

Using the Selection API to create a set of radio buttons

Read full example

Effects showcase

How you can effortlessly apply real-time visual effects to any element

Read full example

Custom transitions

Creating custom page transitions using Entering- and ExitingAnimation

Read full example

Send Button

A button with a fancy animation

Read full example

Rotating pages

An e-commerce design with 3D page transitions

Read full example

A dynamic tab bar

A cool animated tab bar

Read full example

Day-night switch

A custom day-night switch

Read full example

Overlay menu

An animated overlay menu

Read full example

Paged onboarding

An example of how to use PageControl to make a neat on-boarding experience

Read full example

Ticket scroll

Scratching the surface of what you can do with ScrollingAnimation

Read full example

Sign up flow

Animating between the states of a sign-up flow

Read full example

Swipe to reveal details

Swipe sideways to browse cards, swipe upwards for details

Read full example

A new take on tabs

A new take on navigation between tabs

Read full example

A circular menu button

An animated circular menu button

Read full example

A weather app

A weather app concept which uses clipping for a neat transition effect

Read full example

Navigation animation

A curly navigation animation

Read full example

Halftone effect

Take pictures with a halftone effect, tweak them with customized sliders

Read full example

Welcome animation

A welcoming introduction screen

Read full example

Gallery

A gallery where you can browse and delete pictures

Read full example

Material up-vote

An animated up-vote button

Read full example

Reveal actions

A cool reveal animation

Read full example

Stopwatch

A fully functioning stopwatch with dashing animations

Read full example

Pull to reload

A fun pull-to-reload animation

Read full example

Animated loading buttons

A loading button with different success and error animations

Read full example

Animated hamburger icon

An example of how to animate a hamburger icon into a cross

Read full example

Swipe actions

An Inbox with done and postpone actions

Read full example

Swipe places

The famous card swipe control

Read full example

Rotating sidebar

A fancy rotating sidebar

Read full example

Angled navigation

Advanced use of Entering-/ExitingAnimation

Read full example

Scrolling animations

Creating neat animations in response to scrolling

Read full example

Creating a custom switch

Style your controls using inline styles to make them unique

Read full example

A todo-app

A todo app with multiple transitions

Read full example

Attractor

Easily implement interpolation using an attractor

Read full example

Tab bar navigation

Navigate between pages with a custom tab bar navigation setup

Read full example

News feed

Get JSON data using fetch and present it as a news feed

Read full example

Social media example

See how easy it is to design a social media experience

Read full example

Tabs using LayoutMaster

Interesting transitions between pages with LayoutMaster

Read full example

Animated list

See how easy it is to add some animation when you're adding and removing content from your lists

Read full example

Pages using Javascript

A list of buttons navigating to and from pages

Read full example

Basic UX animations

Create animations in response to user input with triggers and animators

Read full example

Fetching JSON

Parsing JSON fetched over HTTP and displaying the results

Read full example

Slides

A series of slides using PageControl

Read full example

Layout

A more complex layout using grids and docking

Read full example

Code-Only

Navigation

Demoing how to combine several pages and components into a single application.

View on Github

Modal screen

Creating a modal confirmation screen by using AlternateRoot.

View on Github

Context menu

Add context-sensitive elements to title bar and status bar.

View on Github

Calendar component

Creating a calendar component.

View on Github

PlaySound

Playing sounds from UX.

View on Github

OSUI

Accounting for the status bar and keyboard.

View on Github

Localization

How to get device locale and display that language.

View on Github

Game of life

Simulation of the classic game of life.

View on Github

Foreign accelerometer

How to wrap native OS functionality using foreign code.

View on Github

Observable condition filter

Showing how to filter a list based on an observable condition.

View on Github

FileBrowser

Showing how to work with FuseJS/FileSystem.

View on Github

EdgeNavigator

A basic EdgeNavigator example.

View on Github

Dropdown menu

A little dropdown UI component.

View on Github

Selection API

Various aspects of Selection API.

View on Github

Scrollbar

Show a scrolling indicator when user is scrolling.

View on Github

Circular layout

Create a circular time picker.

View on Github

Button with image

Different ways to create a custom button with an image.

View on Github

AzureADB2COAuth

Azure Active Directory B2C OAuth login.

View on Github

MixOp

Demoing how to use MixOp property with Change animator.

View on Github

Expanding toolbar

A button with animated expanding toolbar.

View on Github

Attractor

Demonstrating the use of Attractor.

View on Github

cattr

A basic multi-view app example.

View on Github

UserEvents

Defining and raising UserEvents from custom UX components.

View on Github

Transition

Showing a variety of page transitions during navigation.

View on Github

Page tabs

Sample using PageIndicator to create a tab bar for a PageControl.

View on Github

Camera

Using the FuseJS Camera API to take pictures using the native camera apps.

View on Github

Lifecycle

Using the FuseJS Lifecycle API.

View on Github

Image viewer

Pan, Zoom, and Rotate gestures.

View on Github

Swipe

Sample of using the SwipeGesture component.

View on Github

Timeline wrap

A dynamic looping animation using Timeline.

View on Github

AmazonS3

Amazon Web Services Simple Storage Service download.

View on Github

Storage

Using the FuseJS Storage API.

View on Github

Cycle phase

Animation using repeating Cycle.

View on Github

GeoLocation

Using the native GPS to get your location.

View on Github

Facebook login

Facebook login using OAuth 2.0.

View on Github

Github login

Github login using OAuth 2.0.

View on Github

Native dialogs

Implementing native dialogs using foreign code.

View on Github

RelativeTo

Demoing various use-cases for the RelativeTo property of animators.

View on Github