Search

Search results

  1. In this example we will implement a pull to reload design inspired by this cool piece by Michael B. Mayers. The PullToReload-trigger Fuse has a Trigger called PullToReload, which we use in this example. The following snippet illustrates its basic usage. <PullToReload IsLoading="{isLoading}" ReloadHandler="{reloadHandler}"> <State ux:Binding="Pulling"> <!-- active while pulling --> </State> <State ux:Binding="PulledPastThreshold"> <!-- activates when pulled past thr...

    Animation Gesture
  2. This example shows how to use AddingAnimation and RemovingAnimation to animate items being added and removed in a list. LayoutAnimation is used to adjust the position of the other list items inside the StackPanel. The markup <App Background="#eee"> <DockPanel> <JavaScript> var Observable = require("FuseJS/Observable"); var items = Observable(); function addItem() { items.add({ text: "This is an item" }); } ...

    Animation
  3. In this example we show how you can use the PageControl in combination with a Timeline to create an animated on-boarding experience. We got inspired by this design by Sumit Chakraborty. The PageControl We first set up a PageControl with five child panels to represent the five pages. The PageControl considers all direct children to be pages. Each page has some textual content with the same styling. Instead of copying things like Color, FontSize and Margin to all the pages, we create a reusable...

    Navigation Animation
  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
  5. We discovered a blog post by MaterialUp with a nice list of UX designs and felt like taking on the challenge of turning it into code. Here is an implementation of their material up-vote design. Update: watch a video of Jake going through this example. The structure The structure can be split into three parts. The button, the background and the animation. The inner circles The actual button is composed of two filled circles. They each contain a Scaling with Factor="0" which gives them a size...

    Custom control Animation
  6. In this example we are using Entering- and ExitingAnimation together with Keyframe in order to implement this awesome transition animation by Remco Bakker The card class Each page has a Card, which contains the images and their up and down movements. Each page also displays some text, but this part has its own Entering- and ExitingAnimation. <Panel ux:Class="Card" Width="150" Height="150" Opacity="0.4" ux:Name="self"> <ActivatingAnimation> <Change self.Opacity="1" Duration="1" />...

    Animation Navigation
  7. Here is another awesome design we found by Anton Aheichanka that we felt obligated to implement with Fuse. We used the free UI kit from InVision for the assets. The animations This example implements two separate animations: 1. Clicking the pink plus-button makes it expand, revealing more options. 2. Clicking the avatar in the top right corner triggers the calendar page to animate. In this example we handle them separately. Defining the resources We start by defining some resources. We ar...

    Menu Animation
  8. This example shows another use of ScrollingAnimation to make a collapsing and expanding top section for a scrolling list. The example is inspired by this cool pice by Cam Macbeth. Icons are taken from Google's excellent Material Icons pack. Defining our colors The color palette is defined in its own class called ColorPalette and is instantiated in the top of our MainView.ux. <Panel ux:Class="ColorPalette"> <float4 ux:Global="LightGray" ux:Value="#FDFDFD" /> <float4 ux:Global="...

    Animation
  9. In this example, we are making a button with a fancy loading animation. The icons used in this example are from Font Awesome. Note: Although this example contains a complete app screen for context, the focus of this article is only on the button itself. Making the button We begin by declaring our SendButton component. It has a boolean property, IsLoading, which controls the animation. The animation begins when IsLoading becomes true, and plays until it becomes false. From here on, we'll refe...

    Animation Custom control
  10. This example shows how you can use a ScrollView together with ScrollingAnimation to create advanced visual effects to accompany scrolling. In this example, we have an article with a nice header that animates when you scroll through the article. Design The basic layout is like this: <App Theme="Basic" Background="#eeeeeeff"> <iOS.StatusBarConfig ux:Name="statusBarConfig" Style="Dark"/> <Panel> <MultiLayoutPanel ux:Name="headerPanel" HitTestMode="None" Alignment="Top" Height="26...

    Animation Layout
  11. In this example we're making a fancy rotating sidebar, as shown below: ___________________________________________________________________________________________________________________ Update: Watch a video of Jake going through this example. We begin by creating our main panel. Since we want it to rotate around its top-left corner when the sidebar appears, we set TransformOrigin="TopLeft". <Panel ux:Name="content" TransformOrigin="TopLeft"> ... the content of our app ... </Panel> Ne...

    Sidebar Animation
  12. In this example we show how to create a drag-to-reorder behaviour on a list of items. This was made possible by the introduction of IdentityKey property on Each tag, which takes care of figuring out which items are where after a list has been modified. Making a component Since we want to have code that we can reuse in multiple places, we build a custom ux:Class component for our SortableList element. We will need to change the order of items that we pass in through ux:Property, so that list ha...

    Custom control JavaScript Reusable components Animation
  13. This examples shows how to implement an animated menu icon. It was inspired by this cool piece by Joby. The icon itself is composed of three rectangles in a Grid of three rows. The animation is divided into two parts. The scaling of the button when its pressed, and the animation from hamburger to cross icon. A Clicked-trigger is used with a Scale-animator for the first part. The Clicked-trigger also toggles a WhileTrue-trigger which handles moving and rotating the rectangles. <App Background...

    Animation
  14. This example shows how we can create sticky headers that hover at the top of the screen as we scroll the content. Pictures for this example are taken from unsplash.com. Design inspiration: Read App Interface by Kun-Li. The desired effect can be implemented with the use of the x() and y() UX expression functions. Since in this case we only need a vertical translation, we will use the y() function, which tells us the value of an elements' vertical position. The main structure of our app is a Scr...

    Animation Cards Gesture Layout
  15. In this example we use the Timeline to make an animated introduction screen inspired by Stephen Pearsons animation. Creating our resources We start of by defining our resources. In particular, the icons. Defining a base Icon class Since we have several similar looking icons, we define a base class which contains a stroked circle and places the icon image in the middle. <Panel ux:Class="Icon" Width="80" Height="80"> <Image Source="{Resource iconFile}" Width="60%" Height="60%"/> <Circ...

    Animation
  16. This example shows how we can create a segmented code input control with neat animations between focused and non-focused states. Design inspiration was taken from the clean and attractive Code input field concept by Samuel Kantala. Our SegmentedInput is a reusable component and contains both UX code for layout and JavaScript for the logic. Let's take a look at the basic structure of it: <StackPanel ux:Class="SegmentedInput" HitTestMode="LocalBounds"> <string ux:Property="Label" /> <str...

    Animation Custom control JavaScript Reusable components
  17. 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
  18. In this example we are using Entering- and ExitingAnimation to make an interesting card swipe mechanism. The card class We define a class for our cards using the ux:Class syntax. <Panel ux:Class="Card" Height="256" Width="256" Alignment="Bottom" ux:Name="p"> <Rectangle Color="#eee" Opacity="0" ux:Name="overlayRect" CornerRadius="25" Layer="Overlay"/> <EnteringAnimation Scale="0.35"> <Move X="-4" RelativeTo="Size" /> </EnteringAnimation> <ExitingAnimation Scale="0.1"> ...

    Custom navigation Animation
  19. A few simple examples of how to create animations in response to user input with triggers and animators. [VIDEO media/anchored-preview.mp4] [VIDEO media/click-events-preview.mp4] Staggered animation Here we use the animator's Delay property so that the right rectangle does not begin to rotate until the left one has completed. By setting a Target for each of the two animators we can move separate objects (the two rectangles) with just one trigger. If we didn't set the Target properties the an...

    Basics Animation Navigation
  20. In this example we will implement the card swipe control made famous by Tinder. Swipe to the right if you've visited a city, to the left if you have not. To achieve the desired effect, we will use PointAttractor and Draggable to give elements the ability to respond to dragging gestures. PointAttractor will create a zone that the elements are attracted to. We will use three of these to create the Tinder sorting effect. Let's start by looking at the JavaScript: <JavaScript> var Observable =...

    Physics Animation Gesture
  21. This examples shows how to make a cool weather app with animated weather icons. Structuring the app The app is structured using a LinearNavigation with a SwipeNavigate behavior. By setting the SwipeDirection property of SwipeNavigate to Down, we make the gesture a downward swipe instead of horizontal. Each page of the app actually contains the same elements, but with different settings. Some elements, like the rain and snow, are turned on or off using data-bound WhileTrue triggers. We use dat...

    Menu Navigation Animation
  22. In this example we implement a cool reveal animation from the Stripe Dashboard The animated menu We define a class called MenuButton. This allows for a nicer split up of code, but in this case we do not make it a reusable component. The menu icon consists of three circles. We want to animate their size and position so that they morph into one larger circle when clicked. We use the Scale animator for this. One thing to notice is that we define the circles at their maximum size, and scale them ...

    Menu Animation
  23. In this example we'll implement a custom switch control by using the ToggleControl, with separate forward and backward animations. The design was inspired by this awesome piece by Ramakrishna V (which was later animated by Tsuriel). In this example, we will: * Define our own ToggleControl with our own custom animation * Utilize the BackwardAnimation attribute on TriggerAnimation in order to get separate activating and deactivating animations * Have animations with several steps, using Key...

    Custom control Gesture Animation
  24. We found this excellent concept by Tanya Brassie of inCahoots, and decided to implement the design in Fuse. Slicing and dicing This example is quite heavy on image assets, and each image is sliced from the original vector art in 1x, 2x, and 4x densities. This will result in a lot of clutter throughout our code, since we need a MultiDensityImageSource with three instances of FileImageSource for each image. To clean this up, all images are defined separately in StaticResources.ux, along with fo...

    Layout Navigation Animation Basics
  25. In this example we decided to take on another UpLabs challenge by implementing this very cool signup flow animation. You will learn how to animate layout between completely different app states. Defining some colors We define all our colors in a separate file called Resources.ux, enclosed in a ux:Resources tag: Resources.ux: <ux:Resources> <float4 ux:Global="Green" ux:Value="#14FFB5"/> <float4 ux:Global="Purple" ux:Value="#5E2E91"/> <float4 ux:Global="White" ux:Valu...

    Animation Layout