Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
drcmda opened this issue Jan 29, 2019 · 39 comments
Open

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

drcmda opened this issue Jan 29, 2019 · 39 comments

Comments

@drcmda
Copy link
Member

drcmda commented Jan 29, 2019

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. 😍

@drcmda drcmda pinned this issue Jan 29, 2019
@drcmda drcmda changed the title ✨Projects using react-spring ✨ ✨Projects using reactspring ✨ Jan 29, 2019
@gragland
Copy link

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

@brunolemos
Copy link
Contributor

brunolemos commented Jan 30, 2019

DevHub uses it for these animations

@lintonye
Copy link

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

@SaraVieira
Copy link
Member

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

@SaraVieira
Copy link
Member

Codesanbox uses it all over

@LekoArts
Copy link

@ooloth
Copy link
Contributor

ooloth commented Jan 30, 2019

https://www.theazoorsociety.org

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

@phtn
Copy link

phtn commented Jan 30, 2019

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

@mcernusca
Copy link
Contributor

🇺🇸https://americaoffbalance.org

@andrewfluck
Copy link

andrewfluck commented Feb 1, 2019

🍋 https://app.lemonade.social/

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

@andrewfluck
Copy link

@drcmda Here's a sneak peek!

output

output

@drcmda
Copy link
Member Author

drcmda commented Feb 2, 2019

@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
Copy link

@drcmda I also do web development for AOSPA 😆

@andrewfluck
Copy link

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

@rexsuit
Copy link

rexsuit commented Feb 3, 2019

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
Copy link

dotlouis commented Feb 4, 2019

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
Copy link

JasCodes commented Feb 5, 2019

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

@stolinski
Copy link
Contributor

https://www.leveluptutorials.com

@JasCodes
Copy link

@drcmda dude levelup guy @stolinski is using react-spring 😄

@einarlove
Copy link
Contributor

unfold.no

  • Used for case images following mouse
  • Case images reacting to device motion and orientation on mobile
  • Animate scroll position in gallery
  • Various place for hiding/showing things

image

@bogue
Copy link

bogue commented Apr 10, 2019

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

@arcticicestudio
Copy link

arcticicestudio commented Apr 25, 2019

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 🚀 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 😄

@AndreasFaust
Copy link

🛷 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
Copy link

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

GitHub
Example

It just started. Any participation is very much appreciated!

@aleclarson
Copy link
Contributor

@AndreasFaust Keep it up! 👍

@AndreasFaust
Copy link

@aleclarson Thank you!

@tim-soft
Copy link

tim-soft commented Aug 6, 2019

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

@aleclarson aleclarson unpinned this issue May 6, 2020
@joshuaellis joshuaellis pinned this issue Mar 18, 2021
@Emiliano-Bucci
Copy link

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
Copy link

a-type commented Apr 5, 2021

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!

CleanShot.2021-04-05.at.12.27.50.mp4

@Emiliano-Bucci
Copy link

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

@jpvajda
Copy link

jpvajda commented May 14, 2021

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

@arzafran
Copy link

arzafran commented Jul 13, 2021

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

@wojexe
Copy link

wojexe commented Sep 6, 2021

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

@joshuaellis joshuaellis changed the title ✨Projects using reactspring ✨ ✨Projects using react-spring ✨ Dec 22, 2021
@lritter79
Copy link

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

@joshuaellis joshuaellis changed the title ✨Projects using react-spring ✨ [RFC] ✨Projects using react-spring ✨ Mar 1, 2022
@simlmx
Copy link
Contributor

simlmx commented Apr 3, 2022

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/

lefun.mov

This is also using use-gesture.

@meotimdihia
Copy link

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

@chuckdries
Copy link

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
Copy link

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

@olarsson
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests