All Examples

Fluid indicator

Playing with Layouts, Shapes and masl to implement an fancy indicator.

View full example

Flashy tabbar

Playing with Layouts and ScrollView to implement a tabbar.

View full example

Custom slider

How to create a custom slider control and animate curves

View full example

Alternative Dropdown

How to create a button that serves as an alternative to a dropdown

View full example

Drag to reorder

How to add a drag-to-reorder behaviour on a list of items

View full example

Vinyl store

How to create an immersive swipeable cards experience

View full example

Details view animation

List item to detail view animation

View full example

Cube transition

A neat 3D transition between two screens

View full example

Sticky headers

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

View full example

Code input

How to create a segmented code input control

View full example

Interactive infographic

Playing with PageControl and PageIndicator to implement an interactive infographic.

View full example

Endless scroller

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

View full example

Fitness app concept

Fitness app concept with a brutalist design

View full example

Material transition

A neat material design card animation

View full example

Pan- Zoom- and RotateGesture

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

View full example

Custom toggle control

How you can use SwipeGesture to build a custom toggle control

View full example

Material sidebar

Using EdgeNavigator to build a sidebar

View full example

LoadingIndicator

Creating an animated loading indicator while using the BusyTask API.

View full example

Empty state

Easily present a message when there is no data to display

View full example

WhileBusy

Using the WhileBusy trigger while loading large images

View full example

Parallax pages

Pages with a sweet parallax effect

View full example

Radio buttons

Using the Selection API to create a set of radio buttons

View full example

Custom transitions

Creating custom page transitions using Entering- and ExitingAnimation

View full example

Effects showcase

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

View full example

Send Button

A button with a fancy animation

View full example

Rotating pages

An e-commerce design with 3D page transitions

View full example

A dynamic tab bar

A cool animated tab bar

View full example

Day-night switch

A custom day-night switch

View full example

Overlay menu

An animated overlay menu

View full example

Paged onboarding

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

View full example

Ticket scroll

Scratching the surface of what you can do with ScrollingAnimation

View full example

Sign up flow

Animating between the states of a sign-up flow

View full example

Swipe to reveal details

Swipe sideways to browse cards, swipe upwards for details

View full example

A new take on tabs

A new take on navigation between tabs

View full example

A circular menu button

An animated circular menu button

View full example

A smooth login transition

View full example

A weather app

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

View full example

Navigation animation

A curly navigation animation

View full example

Halftone effect

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

View full example

Welcome animation

A welcoming introduction screen

View full example

Material up-vote

An animated up-vote button

View full example

Gallery

A gallery where you can browse and delete pictures

View full example

Reveal actions

A cool reveal animation

View full example

Stopwatch

A fully functioning stopwatch with dashing animations

View full example

Pull to reload

A fun pull-to-reload animation

View full example

Animated loading buttons

A loading button with different success and error animations

View full example

Animated hamburger icon

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

View full example

Swipe actions

An Inbox with done and postpone actions

View full example

Swipe places

The famous card swipe control

View full example

Rotating sidebar

A fancy rotating sidebar

View full example

Angled navigation

Advanced use of Entering-/ExitingAnimation

View full example

Scrolling animations

Creating neat animations in response to scrolling

View full example

Creating a custom switch

Style your controls using inline styles to make them unique

View full example

A todo-app

A todo app with multiple transitions

View full example

Tab bar navigation

Navigate between pages with a custom tab bar navigation setup

View full example

Attractor

Easily implement interpolation using an attractor

View full example

Social media example

See how easy it is to design a social media experience

View full example

News feed

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

View full example

Tabs using LayoutMaster

Interesting transitions between pages with LayoutMaster

View full example

Animated list

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

View full example

Pages using JavaScript

A list of buttons navigating to and from pages

View full example

Basic UX animations

Create animations in response to user input with triggers and animators

View full example

Fetching JSON

Parsing JSON fetched over HTTP and displaying the results

View full example

Slides

A series of slides using PageControl

View full example

Layout

A more complex layout using grids and docking

View 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

Native dialogs

Implementing native dialogs using foreign code.

View on GitHub

Camera

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

View on GitHub

AmazonS3

Amazon Web Services Simple Storage Service download.

View on GitHub

Lifecycle

Using the FuseJS Lifecycle API.

View on GitHub

Github login

Github login using OAuth 2.0.

View on GitHub

Image viewer

Pan, Zoom, and Rotate gestures.

View on GitHub

Facebook login

Facebook login using OAuth 2.0.

View on GitHub

RelativeTo

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

View on GitHub

Timeline wrap

A dynamic looping animation using Timeline.

View on GitHub

Swipe

Sample of using the SwipeGesture component.

View on GitHub

Cycle phase

Animation using repeating Cycle.

View on GitHub

GeoLocation

Using the native GPS to get your location.

View on GitHub

Storage

Using the FuseJS Storage API.

View on GitHub