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

  •        143

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.

https://page-transitions.com/
https://github.com/sdras/page-transitions-travelapp

Dependencies:

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

Tags
Implementation
License
Platform

   




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

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>.

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.

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.

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.

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.

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.

react-native-magic-move - Create magical move transitions between scenes in react-native 🐰🎩✨

  •    Javascript

A follow up project called react-native-shared-element has been created which can be considered the successor to react-native-magic-move. It it an all native solution that provides superior performance (no more passes over the react-native bridge) and transitions. It however does not support some of the more exotic transition types (flip, shrinkAndGrow) that Magic Move does. It also doesn't support the web-platform yet and requires native extensions to run. New users are advised to use react-native-shared-element when possible. As for Magic Move, no more new developments will be started for Magic Move, merely critical bug-fixes. This notification will be updated as development on react-native-shared-element progresses. * The native extensions are recommended to get the best performance, but they are not required. This makes it possible to use react-native-magic-move with expo or react-native-web. If you're having trouble installing the native extensions, please see this guide on how to install them manually.

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.