5 ms·

Barba.js – Create fluid and smooth transitions between your website’s pages

21 points by vmoore 4y ago

lioeters 4y ago
https://github.com/barbajs/barba https://github.com/barbajs/barba
deleted 4y ago
[deleted]
ktpsns 4y ago
To be honest, this site at Firefox/Android is slow and buggy. I would prefer quick loading times of plain old HTML files over plain old HTML, but I acknowledge that this is not sexy.
hey2022 4y ago
It’s barely functional in Safari on iOS. More importantly, none of the suggested navigation patterns create any value for end users. Is there anyone who wished that web page navigation was slower, less predictable, and harder to discover?
eyelidlessness 4y ago
A few observations: 1. I realize part of the purpose of this site is to demonstrate the functionality, but it would do that just as well if not better with subtler animations. 2. It’s quite disappointing that the site neither tones down the animations for prefers-reduced-motion, nor makes any mention of accessibility. What little discussion I found on GitHub was dismissive. Of course, users of the library can theoretically use it responsibly, but they probably won’t without some consideration directly built in to the library itself. 3. Subtler animations would probably also elicit less negativity. I know, it’s HN, and this kind of project showing up here has an proverbial “kick me” sign, but do I think it would get more positive attention. 4. Less important, but it looks like the project has been around for a while, so it’s not entirely surprising that it isn’t built around (a polyfill for) Shared Element Transitions[1]. I’d expect a library like that will have greater longevity. It is surprising not to see something like that under discussion at all.
- CSSer 4y ago
  Did you have a specific link in mind for Shared Element Transitions?
  - eyelidlessness 4y ago
    Lol yes, can’t edit now sorry. 1: https://github.com/WICG/shared-element-transitions https://github.com/WICG/shared-element-transitions
lurn_mor 4y ago
I love it! Works fantastic under Brave (nee Chrome). I'll consider adding it to my arsenal. I can think of plenty of intro/outro use cases!
nextaccountic 4y ago
I would like this if it were merely hiding latency - that is, if the time for loading the next page weren't affected This probably means doing the http request and the DOM layout while the animation is still running
mplewis 4y ago
I’m trying not to be overly negative here, but: I had a really hard time figuring out how to use the home page. I went to a website listed in the showcase. It took over 20 seconds to load to interactivity, and I’m on a high speed 250Mbps connection. Once I found my way into a list of recipes, I noticed it completely stole scroll focus – the page scrolled too fast, going out of sync with my finger. I am not impressed by what I saw during my demo. It doesn’t feel like this project is helping deliver good user experiences.
senttoschool 4y ago
Please don't build sites like this unless you're trying to demonstrate some one-off creativity.

21 points by vmoore 4y ago

lioeters 4y ago

https://github.com/barbajs/barba https://github.com/barbajs/barba

deleted 4y ago

[deleted]

ktpsns 4y ago

To be honest, this site at Firefox/Android is slow and buggy. I would prefer quick loading times of plain old HTML files over plain old HTML, but I acknowledge that this is not sexy.

hey2022 4y ago

It’s barely functional in Safari on iOS. More importantly, none of the suggested navigation patterns create any value for end users. Is there anyone who wished that web page navigation was slower, less predictable, and harder to discover?

eyelidlessness 4y ago

A few observations: 1. I realize part of the purpose of this site is to demonstrate the functionality, but it would do that just as well if not better with subtler animations. 2. It’s quite disappointing that the site neither tones down the animations for prefers-reduced-motion, nor makes any mention of accessibility. What little discussion I found on GitHub was dismissive. Of course, users of the library can theoretically use it responsibly, but they probably won’t without some consideration directly built in to the library itself. 3. Subtler animations would probably also elicit less negativity. I know, it’s HN, and this kind of project showing up here has an proverbial “kick me” sign, but do I think it would get more positive attention. 4. Less important, but it looks like the project has been around for a while, so it’s not entirely surprising that it isn’t built around (a polyfill for) Shared Element Transitions[1]. I’d expect a library like that will have greater longevity. It is surprising not to see something like that under discussion at all.

CSSer 4y ago
Did you have a specific link in mind for Shared Element Transitions?
- eyelidlessness 4y ago
  Lol yes, can’t edit now sorry. 1: https://github.com/WICG/shared-element-transitions https://github.com/WICG/shared-element-transitions

lurn_mor 4y ago

I love it! Works fantastic under Brave (nee Chrome). I'll consider adding it to my arsenal. I can think of plenty of intro/outro use cases!

nextaccountic 4y ago

I would like this if it were merely hiding latency - that is, if the time for loading the next page weren't affected This probably means doing the http request and the DOM layout while the animation is still running

mplewis 4y ago

I’m trying not to be overly negative here, but: I had a really hard time figuring out how to use the home page. I went to a website listed in the showcase. It took over 20 seconds to load to interactivity, and I’m on a high speed 250Mbps connection. Once I found my way into a list of recipes, I noticed it completely stole scroll focus – the page scrolled too fast, going out of sync with my finger. I am not impressed by what I saw during my demo. It doesn’t feel like this project is helping deliver good user experiences.

senttoschool 4y ago

Please don't build sites like this unless you're trying to demonstrate some one-off creativity.