page-transitions-travelapp - Travel App, Native-like Page Transitions

  •        37

This demo shows an example of how to acheive native-like page transitions on the web. There's much to be improved here- it's not meant to be a full-fledged web application, just a quick demo to show how this kind of implementation could theoretically work. These concepts can and should be expressed differently in your own application, the sky's the limit here! This is created with Nuxt and Vue. For detailed explanation on how things work, checkout the Nuxt.js docs.


gsap : ^1.20.4
mapbox-gl : ^0.44.1
node-sass : ^4.8.3
nuxt : ^1.0.0
sass-loader : ^6.0.7
style-loader : ^0.20.3
vuex : ^3.0.1



Related Projects

nuxt-type - Small demo showing custom page animations with a fake typography site

  •    Vue

Small demo showing custom page animations in Vue 2 with a fake typography site, currently using a custom build of Nuxt, pre 1.0.0beta release. Using GreenSock for the animations, including SplitText. Nuxt.js is a framework for creating Universal Vue.js Applications. It presets all the configuration needed to make your development of a Vue.js Application Server Rendered more enjoyable.

swup - CSS transitions between website pages.

  •    Javascript

Animated page transitions with css. Note: In case you like to do your animations in JavaScript, you may also check out swupjs.

yubaba - is an element to element animation orchestrator for React.js ✨

  •    TypeScript

Complex page transitions are becoming more common on the web but we're still at a point where we need to write a lot of boilerplate to make it happen, worse yet disjointed parts of our apps needing to know about each other to make it all work. Yubaba tries to solve this by allowing disjointed parts of your app define what animations they want to happen when a matching partner is found, without explicit knowledge of each other.

smoothState.js - Unobtrusive page transitions with jQuery.

  •    CSS

smoothState.js is a jQuery plugin that progressively enhances page loads to give us control over page transitions. If the user's browser doesn't have the required features, smoothState.js fades into the background and never runs. Below are some cool sites built with smoothState.js. Feel free to submit a pull request with your own site, or tweet me with a link.

Page Transitions


Page Transitions showcases the Transitions available in the Windows Phone 7 toolkit.

sweep - :rainbow: A JavaScript library for smooth color transitions

  •    Javascript

A JavaScript library for smoother color transitions. Project page lives here. sweep.js is a small JavaScript library (5kb zipped) that enables proper color transitions through the HSL and HSLuv spaces. Ordinary CSS transitions or existing frameworks convert HSL colors to RGB before transitioning. sweep.js addresses this by letting you transition through the color spectrum.

lookforward - A small library that helps you to create smooth transitions between pages with the easiest way

  •    Javascript

A small library that helps you to create smooth transitions between pages with the easiest way

vue-overdrive - 🎩 Super easy magic-move transitions for Vue apps

  •    Vue

A Vue.js port of the amazing React Overdrive, using Ramjet under the hood.

react-router-component-transition - Example code for router which does animated page transitions using ReactCSSTranstionGroup

  •    Javascript

A simple component that overrides <Locations> in React-Router-Component to animate page transitions. Simply replace any usage of <Locations> in your app with <AnimatedLocations>.

jqFancyTransitions - Fancy transitions effects

  •    javascript

jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects like wave, zipper, curtain, fountain top, random top, curtain alternative, left top, right bottom.

intro-to-vue - Workshop Materials for my Introduction to Vue.js Workshop

  •    Vue

This repo houses the materials and resources for the Introduction to Vue.js. Most of the materials for the course are outlined below, but there are also directories housed here of very basic examples of some of the techniques we will cover so that students don't have to spend a lot of time researching in order to get started. It is recommended that students use CodePen to create work for the duration of the course, as we'll use preprocessors like SCSS as well as Babel for ES6, and resources like Vue.js, both prod and dev versions, codepen makes it easy to do so without time devoted to setup. If you like, you can also scroll to the CodePen collection section and fork one of the existing pens in those collections, they are comprehensive. There are more true-to-life build process examples, in the VueCLI, Nuxt, and Vuex Resource Sections. It's encouraged to watch the lecture to learn how to set up the builds yourself, though. For sections covering Nuxt, we will be using the directories listed in the Nuxt section below as well as their directories, prefixed with nuxt- here.

react-native-animatable - Standard set of easy to use animations and declarative transitions for React Native

  •    Javascript

To make looping animations simply set the iterationCount to infinite. Most animations except the attention seekers work best when setting direction to alternate. You can create your own simple transitions of a style property of your own choosing. The following example will increase the font size by 5 for every tap – all animated, all declarative! If you don't supply a duration property, a spring animation will be used.

Transitions-Everywhere - Backport of Android Transitions API for animations

  •    Java

Article and sample application contain a lot of examples how to use transitions. Use transition classes from package com.transitionseverywhere.* instead of android.transition.* from android framework Transitions API.

VCTransitionsLibrary - A collection of iOS7 animation controllers and interaction controllers, providing flip, fold and all kinds of other transitions

  •    Objective-C

With iOS 7 you can easily create custom view controller transitions that can be used in a range of contexts (push, pop, modal …). This project provides a library of custom animations which can be dropped directly into your project. It also has a number of 'interaction controllers' which can be used with any of the custom animations in order to make your transitions interactive. The library currently contains the following animations, which can be made interactive with either a swipe or pinch gesture.

jquery.magicmove - Animate DOM transitions.

  •    Javascript

Animations and transitions are fairly crucial to the look and feel of modern applications, and can be a good way of indicating to a user what their interactions are doing. Indeed, the best interfaces have been clued up on this for a while now -- pretty much every interaction you have with iOS involves an animation. However animations can get convoluted really fast, especially if you have a lot of different states which require different transitions depending on which states are being entered or left. This is a problem I've struggled with in more complex UIs, specifically figuring out the position of elements - (we ended up using position absolute for everything, and having a huge amount of conditional code).

Motion - A library used to create beautiful animations and transitions for Apple devices.

  •    Swift

Welcome to Motion, a library used to create beautiful animations and transitions for views, layers, and view controllers. Take a look at a sample Photos project to get started.

ionic-native-transitions - [Maintenance only] Native transitions (iOS & Android) for Ionic Framework

  •    Javascript

Please note that this project is now in maintenance mode. We welcome PRs for bug fixes, but encourage you to use Ionic 2 and Ionic Native for all future development. The recommended version for the Transition plugin is 0.6.5 or higher.

Effeckt.css - A Performant Transitions and Animations Library

  •    CSS

Designing and developing UIs for the mobile web is tricky, but it's extremely difficult to do that while delivering something that performs at 60fps. The best opportunities to getting jank-free transitions on phones/tablets are CSS transition and keyframe animation based, especially tapping into hardware-accelerated transforms and opacity changes. @daneden did really nice work with Animate.css but I think the web would benefit if we could take that work to the next level. There's already been fantastic experiments and demos exploring CSS-based transitions, but it's distributed all over.