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

  •        497

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.

https://github.com/sdras/nuxt-type

Dependencies:

gsap : ^1.19.1
nuxt : 1.0.0-alpha.4

Tags
Implementation
License
Platform

   




Related Projects

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

  •    Vue

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.

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.

nuxt-bnhcp - nuxt、SSR、vue、mysql、redis、nginx、socket.io NUXT(实战项目)

  •    Vue

nuxt、SSR、vue、mysql、redis、nginx、socket.io NUXT(实战项目)

Statusfy - A Marvelous Open Source Status Page system

  •    Javascript

Statusfy is a Status Page System, easy to use and completely Open Source. You can easily create a fast System either Static Generated or Server Rendered and easily deploy it. A Statusfy site is a Web Application, created with Vue, Nuxt.js and Tailwind CSS. We use Vue to dynamically define the interfaces that represent the data, Nuxt.js to make a quick and useful abstraction of the client and server logic, and Tailwind CSS to rapidly define the default theme.


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.

vue-examples - Collection of Vue examples for beginner front end developers

  •    Javascript

Collection of Vue.js reference examples for teaching and learning Vue. These examples assume NO experience of front end by the reader. I myself had more experience as a backend engineer and found most front end examples required too much familiarity of HTML, Javascript and the front end stack. I journaled these examples to help myself and others. The early examples 1-15, are intentionally simple while the remainder start using VUE cli and NUXT which are more sophisticated patterns (they generate complex starting projects) that it is helpful to build up to. VUE cli is what an experienced front end developer may use if they are unfamiliar with Vue and Nuxt would be used by an intermediate Vue Front End engineer as it provides more benefits as well as more complexity.

express-template - Starter template for Nuxt.js with Express.

  •    Vue

This is a project template for vue-cli. Make sure to use a version of vue-cli >= 2.1 (vue -V).

gatsby-plugin-transition-link - A link component for page transitions in gatsby

  •    Javascript

TransitionLink provides a simple api for describing expressive transitions between pages in Gatsbyjs. Page links are used to determine which transition should fire, making page transitions flexible and easy to use. For info on using TransitionLink refer to the docs. The source for the docs site is available here.

laravel-nuxt - A Laravel-Nuxt starter project template.

  •    PHP

A Laravel-Nuxt starter project template. You can access your application at http://localhost:3000.

starter-template - Nuxt.js starter project template.

  •    Vue

A Nuxt.js starter project template without the distraction of a complicated development environment. This is a project template for vue-cli.

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.

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.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.