react-spring simple examples

[bradwoods]

I started a list of simple examples of react-spring for anyone getting started. Let me know if you are after anything specific and I'll add it.

https://examples.bradwoods.io/react-spring

[aomini]

hey I tried to copy your first and second example to learn but I'm getting error on wxyz.to() function.
can you look at this sandbox once bardwoods demo copy

[bradwoods]

Sure. I've added it under transition-trail-repeating. Let me know if that is what you were after.

[aomini]

oh yeah thanks. So onRest method runs every time whenever the animation ends. But isnt updating stating like will rerenderthe entire component? Can we just rerender the animated div only?
Thanks alot for your examples.

[bradwoods]

No worries. I'm glad someone is finding them useful! To my knowledge, I don't think it's possible to rerun the animation without rerendering the component using react-spring. The animation needs a value to change in order to restart. When that value changes, the component re-renders.

[aomini]

that's cool.. but react-spring have keyframes... can you do that with keyframes as well?? the docs seems to be more confusing with keyframes.

[bradwoods]

Here's an example that uses keyframes with onRest to reset, is that what your looking for?

[AndrewSB]

I'd love to see an example with an externally defined svg file (see #989)

[bradwoods]

I'm not sure how you would go about that. In my experience, when animating svgs, I have always had them inline so I can access the different elements that make up the image. I've added an example of animating an inline svg stroke in case you decide to use that approach.

[bradwoods]

Added an example of animating a number. https://bradwoods.io/guides/react-spring/animate-a-number

[aomini]

great one. Thanks. I learnt a lot from your examples.
hey Bradwood, I found this template on gatsby which was created with react-spring. Can you have examples with this sort of parallax effect? https://rakeshshubhu.github.io/
keep on uploading examples man.

[bradwoods]

Glad to hear it. Here a parallax example. I hope it's useful. https://bradwoods.io/guides/react-spring/parallax-scroll.

[aomini]

wow.. That's so cool. thanks.

[aomini]

why did you use useCallback here?

const onScroll = useCallback(
		e => set({ scrollTop: e.target.scrollTop }),
		[set]
	);

[bradwoods]

Just as an optimization. The docs talk about it here.

[bradwoods]

Added a config example - https://bradwoods.io/guides/react-spring/config

[bradwoods]

Added a config presets example - https://bradwoods.io/guides/react-spring/config-presets

[sanderwapstra]

@bradwoods Thanks for these examples, really helpful! I'm struggling with a repeating useChain. I want to animate three dots (scale to 1.2 and back) and the second dot is starting before the first one is finished so it's a nice wave. Do you know / have an example what's best practice for these kind of animations? :)

[bradwoods]

Hey @sanderwapstra. Glad there useful! Are you looking to animate the dots so the 2nd dots starts its animation when the 1st dot's animation finishes?

[sanderwapstra]

@bradwoods Thanks for your reply! No, the second one starts before the first one is finished. So there are three elements animating, but I’m not sure how to loop a group of animations.

[bradwoods]

Does this example help? https://bradwoods.io/guides/react-spring/transition-trailing-repeating
It sounds like trail would be a good fit for this scenario.

[sanderwapstra]

With useTrail I cannot set a custom delay I believe (#1083 (comment)), but your suggestion (the onRest function) combined with useTransition works! Thanks!

[phoenisx]

Hi @bradwoods

Thanks for your examples.

I am struggling to create an animated Window Scrollspy. Sandbox here - https://codesandbox.io/s/react-spring-scrollspy-gei79

The issue is, if you click on Page 3 link, it will animate properly to .page-3.

The issue starts, when user manually scrolls to some other place, say, the user clicks on Page 3 link and manually scrolls back to website top: 0, and clicks Page 1. Clicking on Page 1 should have animated from top to bottom, but it animates from last scroll position, i.e. it animates from bottom to top, Page 3 to Page 1.

Not sure, what I am doing wrong, or what particular API or config I am missing, due to which this is troubling me.

[phoenisx]

Ok no worries!! The moment I was writing on this thread, I got a solution.

I just had to use set({ from: { y: window.pageYOffset }, to: { y } });, to specify the initial Y offset, from which to animate.

I wasted a whole day for such a simple answer. 😓

[bradwoods]

Glad you worked it out, looked tricky.

[bradwoods]

Added a chaining transitions example - https://bradwoods.io/guides/react-spring/transition-chaining

[hedberg]

Hi @bradwoods,
thanks for sharing your work!
I'm looking to create a (out-in) transition between a number of screens/elements so that the active one fades out before the next one animates in. Seems like an easy enough thing to do but I haven't been able to work it out so far.. Do you have an idea of how that should be solved?

[tcherokee]

Hi Brad,

I am hoping you can help me with an example. I am trying to replicate this animation which I did using CSS Transitions in React Spring. So far I have gotten this far https://codesandbox.io/s/suspicious-tharp-yru1v?file=/src/App.js. I can technically finish the animation by using two more useSpring functions to animate the bottom span, but considering the bottom span is using the same animation as the top span, but just with negative values instead of positive values, I figure there should be a more efficient way of doing this?

[tcherokee]

Actually, I was playing around a bit more with react spring and I think I might have found a way to shorten the about of code I needed for this animation. If I use the shorthand style props, I can reverse the animation by adding - to the variable in the style section. so something like this seems to work transform: xyz.to((x, y, z) => `translate3d(${x}px, ${-y}px, ${z}px)`). However, the issue I am running into now is using two transforms in the style tag, it seems react spring might be ignoring the first transform and only running the second one. You can see an example in my playground here https://codesandbox.io/s/peaceful-meadow-4og6b?file=/src/App.js:1188-1258

[bradwoods]

Yeah the 2nd transform would override the 1st one.

[tcherokee]

Thanks for clarifying, is there any way to combine transforms?

[bradwoods]

Not to my knowledge, considering each transform is taking values from separate functions

[tcherokee]

Ok, thank you for all your help

[bradwoods]

New examples design out. Let me know if I can change anything to make things easier. https://bradwoods.io/guides/react-spring

[bradwoods]

Added how to reset a transition example - https://bradwoods.io/guides/react-spring/transition-reset

[bradwoods]

Added on-frame callback example - https://bradwoods.io/guides/react-spring/callback-on_frame

[bradwoods]

Hey mate,

The only work I've done in regards to scroll is this parallax scroll example. I think it would depend on what the goal is. Could you give some details?

[ramojej]

Well, I would just like to animate elements when the user scrolls to a certain section. For example I scroll down to "Services section" maybe with an offset of 100px, only then the elements would animate.. each with a different delay.

[bradwoods]

I think the intersection observer might be your best bet for that.

[ramojej]

Do you have like a really simple slide up effect example?

[bradwoods]

I'm not sure what you mean, could you give more detail?

[bradwoods]

Added animation on-complete callback example - https://bradwoods.io/guides/react-spring/callback-on_complete

[bradwoods]

Using react-spring in react-three-fiber - https://bradwoods.io/guides/react-spring/with-react-three-fiber

[joakim-roos]

Thanks for these examples, getting into react-spring now!
Do you have any tips on how to do a simplified version of this interpolation animation without using use-tweak? Onscroll-event or a looping animation would be really cool. https://codesandbox.io/s/use-tweaks-example-ekqv2

[bradwoods]

No worries. I'm not sure what your after. Are you looking to scroll the text left / right on a loop, without using the control panel?

[bradwoods]

Use duration - https://examples.bradwoods.io/react-spring/transition-duration

[stressed-pet-owner]

Hi, Brad!

Would like to know how I can make this kind of animation possible.. I only animated simple ones and being challenged by this one: https://share.getcloudapp.com/X6uexJr6

Will it be better to animate it as a single SVG or separate SVGs?

[bradwoods]

I think it would be possible. The way I would do it is by applying springs to elements within the SVG, like circle or a group nesting multiple elements. Sorry I don't have any examples for that specific case.

[stressed-pet-owner]

@bradwoods,

tried my best, but can't copy the effect in the video.. how to do the "popup effect". what I did was scale it from 0 to 1.. but it's sliding. The lines also I can't animate..

My biggest issues it to make it automatically animate without pressing any button. Can you give me some tips please. Thanks a lot!

here's the sandbox: https://codesandbox.io/s/peaceful-drake-zgyuh?file=/src/AnimatedSVG.js

[bradwoods]

To make an animation start automatically you can use the from property, example.

[stressed-pet-owner]

Thanks. :)

[stressed-pet-owner]

Hi, mate @bradwoods..

Can you please help me with the draw line effect? I've tried, but can't make it work..