Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Assign animated style to more than one element?

See original GitHub issue

With @JonnyBurger we had a discussion today where we were wondering if we could assign a style to more than one element? We have styles for animations that we have to duplicate everywhere. Currently, we factorize these into useDerivedValue but it’s only the values, not the properties.

If this would be possible, it would also make sense for animatedProps to support an array:

animatedProps={[strokeAnimation, rotateAnimation]}

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:7 (7 by maintainers)

Top GitHub Comments

2reactions

terrysahaidakcommented, Oct 20, 2020

You can extract the callback here and pass it multiple times to each useAnimatedStyle, as a workaround

Don’t forget to mark it as worklet

0reactions

karol-bisztygacommented, Oct 20, 2020

It’s been discussed before we postponed implementing this having difficulties coming from shared value being async. However we might get back to this in the future.

As for the props if you really need this, feel free to open an issue with feature request.

Top Results From Across the Web

Apply multiple animation effects to one object - Microsoft Support

Open the Animation Pane. Select the object on the slide that you want to animate. On the Animations tab, click Animation Pane. Open...

React Native Animated Multiple Animations on one element

You use a single animated value. this.expandAndShrinkAnimation = new Animated.Value(50); Animated.

How to achieve multiple css animations on one element?

For some reason I cannot get this code to work. I'm trying to rotate this object 360 degrees (which works fine) AND change...

Using Multi-Step Animations and Transitions - CSS-Tricks

CSS animations are rad and the concept is fairly simple. Name the animation, define the movement in @keyframes and then call that animation...

Animating Many Elements and the Animate Method | kirupa.com

Animating multiple elements using the animate method is scarily very similar to animating just a single element using the animate method. To cut ......