This is a list of commonly requested
elements from our community. These are things like sticky navs, loopings animations and toggle
animations. This isn't meant to be a complete list of everything that's been
requested, but more a way to address the masses and get these examples out there.
If you feel like something is missing and would like to contribute, put together an example and reply to this community thread.
Each example, will include a link to download the .pixate file of the example, an explanation of what element does, a QR code to try out the prototype and an animated GIF of the element in action.Looping Animation
This is more of a workaround, since Pixate doesn't have a specific loop property for animations. This is something we may add eventually, but in the meantime, you can use the Spring easing curve with no friction. This creates a loop, as the animation springs perpetually, since there's no friction to stop it.
Each row rotates the layer to different degrees (180, 360 and 1080) and each column uses different tension properties (100, 500 and 1000).
This has every animation type set to a toggle. Since the last three need a condition to start the animation, three smaller layers change their state (rotate) and the animations are based on their changed state.
Pull to Refresh
This is a simple rotate animation linked to the pull and release of a scrollview. The rotation can be swapped for any other animation by using the same properties.
This example is for setting up a multi-direction draggable layer with limitations. The "Free" option for the Drag interaction, doesn't allow you to set limits. This shows how to use two Move animations to get a layer moving while following a drag.
Please note, this example uses a slower rate to show the handle and the object are two different layers. Setting the rate to "1" will make the object follow the handle at the same rate. The provided setup can be used for a parallax effect.
Scroll or Sticky Navs
These are two examples of sticky navbars. The first is based on the first view's scroll position. The second is based on the second view's scroll velocity. This allows you to slowly scroll through the content without hiding the navbar. Scrolling quickly will hide the navbar.
This file has four examples of scroll indicators. These are used to show what page of content you're on within a scrollview. These are all setup to work with a scrollview that has paging enabled. Using a scrollview without paging will not get the same results.
Tap and Drag Navigation
This example shows how Drag and Tap can be used to navigate between pages. This includes a scroll indicator that can be tapped to move from page to page.
Multi Screen Navigation
This is an advanced example that has three secondary screens and one tertiary page. This is to show how navigation between pages can be set up by grouping and moving layers. Each screen has different set of interactions and effects.