sdras / page-transitions-travelapp

Travel App, Native-like Page Transitions

page-transitions-travelapp

Build Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev

# build for production and launch server
$ yarn build
$ yarn start

# generate static project
$ yarn generate

For detailed explanation on how things work, check out Nuxt.js docs.

page-transitions-travelapp's Issues

Sophia Gonzalez stays small

this is because the attached inline style doesnt go away when you transition pages

A sticky footer could make thing even smoother

At certain screen sizes - the footer kinda jumps around - and gives it just a little less polished feeling that it could have. (Really great job on these transitions!) https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Glitch during page transition in Firefox

Using Firefox 59.0.2 (64-bit), Windows 10 Pro.
I took a screenshot to better explain what's happening:

It seems that the during the transition the "main" content loses its height, hence the footer black bar appearing on top is causing the visual glitch.

Domain is gone

https://page-transitions.com/ shows a parking page now.

Some of the text in the page that identifies the user does not change

Devtools in production

Hello,
thanks for such an awesome demo!

I think it would be beneficial to have Vue Devtools enabled in production, so that it is easier to get a grip of what is happening without a need to download it locally.

I know it is just a simple one-liner Vue.config.devtools = true, but I have no clue where to put it in the Nuxt project. In regular Vue template there would be a main.js function, whereas where I couldn't find one.

Thanks in advance :)

Beautiful webpage ; Customizing your webpage

I am actually doing a customization of your webpage and I wonder How can I change the map ; in which file , what code ?! PLease and thank you ; Because I dont see your key from googleapi ; I wonder if you did it somehow differently

JS Errors from gsap when clicking on the three dots in the upper right corner

I get JS errors when I click on the three dots in the upper right corner. Every few milliseconds the following appears in the console:

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

With the installed gsap version, the error gets triggered by:
_cs = _getComputedStyle(target, "");
which appears about 5 times in node_modules/gsap/
(Trying to replace "" with null didn't help)

I tried upgrading gsap to v. 2.x and 3.x, but that didn't help either. With 2.x the offending line is:

_getComputedStyle = function(e) {
  return _computedStyleScope.getComputedStyle(e); //to avoid errors in Microsoft Edge, we need to call getComputedStyle() from a specific scope, typically window.

I'm using Google Chrome on Windows. On your own site everything works fine.

The only other thing that doesn't work, is the map, since I don't (yet) have my own API key / access token. Could these issues be related? Although - just re-rechecked your site today and you get the same error from mapbox...

Profile photos are not visible but clickable

Hi there,

I found a little issue which is demonstrated in the gif below.

If I get the chance, I will check into it one of these days if no one beats me to it.

Any pointers on how you'd want it fixed, and I will eventually do it!

Thanks!

Side icon has wrong transition

Steps to reproduce:

• In the navbar click on "Sophia's Places"
• Click on "Sophia's Home"

Expected:

• The side icon transitions vertically while changing from plus to mail icon.

Actual:

• The side icon jumps instantaneously.