Search

Search results

  1. We saw this cool login transition from Anton Aheichanka using the free to-do UI kit from InVision and wanted to recreate it in Fuse. Note: that this example is made to demonstrate the exact animations as shown in the original animated GIF, and is not focused on creating actual functionality in a login screen or calendar. The basic structure This example has two parts; the "to logged in"-animation, and the "to logged out"-animation. We start by defining the two screens separately and make sur...

    Transition Animation
  2. Cube transition This example illustrates how you can create a neat 3D transition effect between two screens. The viewport To get proper 3D perspective projection, we place everything inside a Viewport at the root of the app. Note that we set CullFace="Back". This makes it so that only the front face of any element is visible. The Perspective property controls the distance (in points) between the camera and the Z = 0 plane (where graphics are drawn by default). The field of view is then calcu...

    3D Menu Transition
  3. This example shows how you can create a neat material design card animation. It is inspired by this awesome piece by Ivan Bjelajac. The icons are from Google's Material Icons, and images from Unsplash. Resources, data and components Global, static resources such as fonts, text styles and the color palette are defined as a ux:Class in a separate file, StaticResources.ux. Since it only contains static resources (ux:Class and ux:Global) it doesn't need to be instantiated â its contents are autom...

    Material Design Transition
  4. This example shows how to create an immersive swipeable cards experience. The screen pops with color and you can even interact with the products shown! Inspiration: this good-looking cards animation by Artem Miskevich. All images are taken from unsplash.com. Animated folder and vinyl The products in our application are represented as "cards", so we start out by creating a reusable ux:Class component for them. Although the Card class holds the whole layout for a product, we'll take a look at h...

    Animation Basics Cards Custom control Layout Navigation Transition