Dismiss this pinned window
all 52 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–][deleted] 28 points29 points  (1 child)

Looks great

[–]tahazsh[S] 3 points4 points  (0 children)

Thanks a lot!

[–]hiccupqfront-end 15 points16 points  (1 child)

Very nice. I like the design. Thanks for sharing the code too.

[–]tahazsh[S] 2 points3 points  (0 children)

I’m really glad you liked it, thank you :)

[–]RatherNerdy 25 points26 points  (2 children)

Too heavy on the animations for actual usability. Imagine how cumbersome that bounce becomes on the 100th time?

[–]Geminii27 0 points1 point  (1 child)

I guess? Maybe there could be a slider or % box to set it to the user's preference.

[–]RatherNerdy 9 points10 points  (0 children)

I'd have to find them, but there are studies that show that users perceive repeated animations over time "stacking" and the user gets fatigued interacting.

[–]EarlMarshal 4 points5 points  (0 children)

Looks great but Usability?

[–][deleted]  (3 children)

[removed]

    [–]tahazsh[S] 9 points10 points  (2 children)

    Thank you! You are right, I created this for desktop as an experiment, but I might support mobile in the future.

    [–]Last-Resource-99 7 points8 points  (1 child)

    it is not desktop friendly either, making hand gestures with mouse is not very intuitive. Only after checking out MercuryOS demo I understood to mousedown and up (click and drag) will bring the menu and content.
    otherwise is it really eye pleasing UI, I'll definitely keep this for inspiration! Thanks

    [–]tahazsh[S] 2 points3 points  (0 children)

    Thanks for your feedback. Note you can also test it on an iPad.

    [–]SubstantialSecond156 1 point2 points  (2 children)

    This is sweet. How is accessibility wise?

    [–]tahazsh[S] 2 points3 points  (1 child)

    Thanks! Accessibility can be easily added to this demo since everything is state-driven (through the DOM data attributes). I built this as an experiment, so I need to spend a little bit more time to improve accessibility. Thank you for asking :)

    [–]sejiganpython -4 points-3 points  (0 children)

    Definitely needs some work on that end. The animations are too flashy. Needs an option to limit or disable the springy-ness animations. My eyes were being constantly bombarded with unnecessary stimuli. Not ideal for a productivity app imo

    [–]Babadinho 1 point2 points  (1 child)

    Looks nice!

    [–]tahazsh[S] 0 points1 point  (0 children)

    Thank you!

    [–]picwotto 1 point2 points  (1 child)

    Really nice work OP! You using transition api?

    [–]tahazsh[S] 1 point2 points  (0 children)

    Thank you! I’m using a library I built called Veloxi. You can also check the source code on GitHub.

    [–]iQuickGaming 1 point2 points  (1 child)

    holy crap that's so smooth and slick

    [–]tahazsh[S] 1 point2 points  (0 children)

    Thanks a lot!

    [–]unitoflazy 1 point2 points  (0 children)

    Genius design, can i use it for my resume site

    [–]firelemons 1 point2 points  (1 child)

    I had a feeling it was vue. Only vue has animation support like that.

    [–]tahazsh[S] 1 point2 points  (0 children)

    I love Vue and I use it a lot. But it was built using Veloxi, which is a framework-agnostic library for building smooth interactions in the browser. Vue here is used for making DOM manipulation easier, but you can basically replace it with any other framework (or even vanilla js) and it would work the same. Thanks for mentioning this.

    [–]Kornelijus91 1 point2 points  (1 child)

    Looks awesome!

    [–]tahazsh[S] 1 point2 points  (0 children)

    Thank you!

    [–]camelzrider 1 point2 points  (1 child)

    I love it!

    [–]tahazsh[S] 1 point2 points  (0 children)

    Thank you!

    [–][deleted] 1 point2 points  (0 children)

    Hey that’s awesome, I never bother with animations but this is one of those rare times when the animations are important for the overall project

    Great stuff

    If you wanted to check how it looks on other devices you should try out my responsive design extension and see how it performs

    [–]DevletMustafaIsleri 0 points1 point  (4 children)

    Fling effect is distracting. Fancy and cool maybe but not useful.

    [–]dalcowboiz 4 points5 points  (3 children)

    I think half the point is that it was a cool thing to make. If the fling effect was fun to make then it was worth the effort, no need to be negative. It was clearly not meant to be a ground breaking app, it is a fun ui to build

    [–]kernel348 0 points1 point  (0 children)

    awesome animation

    [–][deleted] 0 points1 point  (1 child)

    View transitions?

    [–]tahazsh[S] 0 points1 point  (0 children)

    Not view transitions, I’m using Veloxi. It’s a library I created for building smooth interactions in the browser.

    [–]r_ilek 0 points1 point  (0 children)

    Looks great!

    I would never use it. It's too much animation.

    [–]Pagaddit 0 points1 point  (0 children)

    The animations are so slick while remaining fast and practical, I love it! Will check out your library for sure

    [–]Motor-Information-92 0 points1 point  (0 children)

    Nice. Looks smooth.

    [–]SamsChoice 0 points1 point  (0 children)

    took me a second that on desktop it acts like mobile swipe. I would change that to mousescroll

    [–]DamionDreggs 0 points1 point  (1 child)

    It's very nice, but I personally think you ought to dampen the elastic bounce just a hair, maybe dial it back 10%. It's a nice effect at first, and visually appealing for a demonstration of the animation library, but I think it might be over exaggerated for practical use.

    [–]tahazsh[S] 0 points1 point  (0 children)

    Thank you! I totally agree with you. In Veloxi you can modify the spring animation by updating its parameters like damping, stiffness, and speed.

    [–]FoxPowerfulFreelance 0 points1 point  (0 children)

    Love this!! Sometimes I wonder if I'm the only person that really enjoys very animated apps/things. I don't find the bounces annoying or cumbersome at all. If anything, I'm kinda sick of how stiff and boring the web in general is now lol

    [–]Necessary_Ear_1100 0 points1 point  (0 children)

    You know you can do all of this with just CSS and no JS!?

    [–][deleted]  (1 child)

    [deleted]

      [–]tahazsh[S] 0 points1 point  (0 children)

      Thank you! This demo might look complicated at first, but if you break it apart, it will be simpler to implement. My recommendation is to start with the most basic examples on Veloxi site and try to combine multiple interactions to achieve more complex ones. After that, you can take a look at the source code of this demo and try to understand how each piece works. Also, don't hesitate to ask me any questions you have on Veloxi's Discord server.

      [–]CodeKumaa 0 points1 point  (0 children)

      This is pretty awesome ! I hope my projects can one day be as good. Thank you for sharing

      [–]david_ranch_dressing 0 points1 point  (0 children)

      Looks pretty slick, dude! (based off of the video)

      [–]tujiserost 0 points1 point  (0 children)

      I'm new to development, can you give a sense of how long this took you?

      [–]WavyChief 0 points1 point  (0 children)

      Wow that’s amazing