pmndrs / react-spring

✌️ A spring physics based React animation library
http://www.react-spring.dev/
MIT License
27.98k stars 1.19k forks source link

[RFC] ✨Projects using react-spring ✨ #476

Open drcmda opened 5 years ago

drcmda commented 5 years ago

Let's collect some links here ❤️

We could feature more projects on the front-page or put an extensive list on the (upcoming) webpage. This issue could also serve as a way to explore all the cool stuff that people have created.

Please share some, any live app or site you've made that animates. 😍

gragland commented 5 years ago

https://divjoy.com uses it for the bouncy cards on hover :)

brunolemos commented 5 years ago

DevHub uses it for these animations

lintonye commented 5 years ago

https://learnreact.design Using useSpring for the cover zooming effect.

SaraVieira commented 5 years ago

https://boredaf.app uses it for the modal

SaraVieira commented 5 years ago

Codesanbox uses it all over

LekoArts commented 5 years ago
ooloth commented 5 years ago

https://www.theazoorsociety.org

I used it for the animating hexagons, stats, and accordions.

phtn commented 5 years ago

Our site https://wallacewater.us use it on cards and texts

mcernusca commented 5 years ago

🇺🇸https://americaoffbalance.org

andrewfluck commented 5 years ago

🍋 https://app.lemonade.social/

We use it in the tabs on profile scene (and page indicators on the up and coming create feature)

andrewfluck commented 5 years ago

@drcmda Here's a sneak peek!

output

output

drcmda commented 5 years ago

@andrewfluck that's arz bhatias and your company? i've done paranoidandroid with arz a couple of years ago. such an odd coincidence. : D

andrewfluck commented 5 years ago

@drcmda I also do web development for AOSPA 😆

andrewfluck commented 5 years ago

Was gonna say I was in the slack, but you aren't in the AOSPA slack 😆

rexsuit commented 5 years ago

https://www.mathematic.org/

Used it for page title animations and mobile slide out menu. Would like to also be able to use it for scroll-to points and svg animations, but hadn't wrapped my head around how I'd do that with react-spring yet.

dotlouis commented 5 years ago

https://monbanquet.fr uses react-spring for modal animations and left side navigation panel on mobile. (More to come) I want to eventually re-do everything with react-spring 😁

JasCodes commented 5 years ago

@drcmda I got something which I have started. Check it out http://zetta.surge.sh

stolinski commented 5 years ago

https://www.leveluptutorials.com

JasCodes commented 5 years ago

@drcmda dude levelup guy @stolinski is using react-spring :smile:

einarlove commented 5 years ago

unfold.no

image

bogue commented 5 years ago

My namesake's personal website: https://jeffgauthier.com react-spring all the way -- sections transitions, page fade-ins -- a joy to work with!

arcticicestudio commented 5 years ago

The official website and documentations of Nord makes use of react-spring on the landing and port projects pages in introduced in version 0.9.0. It powers an interactive animated component that uses a 3D depth effect for the port project's logos by moving against the direction of the current mouse position where the larger logos will move more to give the impression that they are closer.


(Click to enlarge)

Thanks for this awesome project :rocket: and your hard work to create a UI animation performance beast library! Using animations without any concerns about render() problems (because there are none 😄) is a great feeling :smile:

AndreasFaust commented 5 years ago

🛷 react-sled

A customizable carousel made with react-spring and styled-components. Because React-world needs a handy, spring-based viewpager.

GitHub Example

It started with this example from the react-spring-docs and is about to reach version 1. Any participation is very much appreciated!

AndreasFaust commented 5 years ago

Another react-spring-project from my side: gatsby-plugin-transitions

GitHub Example

It just started. Any participation is very much appreciated!

aleclarson commented 5 years ago

@AndreasFaust Keep it up! 👍

AndreasFaust commented 5 years ago

@aleclarson Thank you!

tim-soft commented 5 years ago

I made a lightbox with react-spring v9 and react-use-gesture. It is very touch-friendly with pinch+zoom/pan, double click to zoom in/out and more. I think it feels better than anything else I've tried - the power of springs!

https://github.com/tim-soft/react-spring-lightbox Demo Codesandbox

Emiliano-Bucci commented 3 years ago

Hi! I've created, some time ago, a carousel library powered by react-spring and react-use-gesture -> https://react-spring-carousel-js.emilianobucci.com :)

a-type commented 3 years ago

Hi folks! https://with.so uses react-spring extensively for so much of our core functionality! Spring animations make the spatial workspace feel much more natural and put some serious shine on size transitions, camera zoom, and position interpolations when remote room members move things around. react-spring's flexibility between declarative and imperative usage helped us optimize the app (along with Zustand) using outside-React subscriptions and decoupling presentation smoothness from our backend state updates.

We just started sponsoring the project. Thanks for the great work and congrats on releasing v9!

https://user-images.githubusercontent.com/2829772/113598096-9e9f2000-960a-11eb-814a-dfb80b297a03.mp4

Emiliano-Bucci commented 3 years ago

Hi! I've created a small open source react component based on react-spring -> https://react-spring-dialog.emilianobucci.com/ :)

jpvajda commented 3 years ago

We use react-spring at https://docs.newrelic.com/

arzafran commented 3 years ago

It's part of our default stack at Studio Freight, here are some examples:

wojexe commented 3 years ago

My portfolio website uses react-spring! 😄 https://wojexe.com/

lritter79 commented 2 years ago

My portfolio uses it https://my-portfolio-iota-pink.vercel.app/

simlmx commented 2 years ago

I use it throughout my online board game website! Try a game of Bloco against a few bots to see it in action.

https://lefun.fun/

https://user-images.githubusercontent.com/1105380/161431371-13fd3083-2eac-4cbf-b1d8-eccf22bc6577.mov

This is also using use-gesture.

meotimdihia commented 2 years ago

I am using React-Spring for the reader page on mobile: https://comick.fun

chuckdries commented 2 years ago

I'm using react spring for all the motion: 2d DOM animations for the sidebar, and 3d r3f animations on the game board during play: https://buzzwords.gg

iyinchao commented 1 year ago

We use react spring for our homepage, to integrate with swiperjs and animating DOM elements https://huxuan.qq.com/trade/free/index

olarsson commented 1 year ago

We used react-spring for https://centralstaden.se/