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.

staggerChildren affects first render only

See original GitHub issue

staggerChildren affects first render only. Is this intentional behaviour or should subsequent renders also be staggered by this property?

For example, if I render 4 items from an array, they will stagger on initial render. If I adjust the offset for this imaginary array, the next 4 items will animate in-sync.

https://user-images.githubusercontent.com/156681/107303675-6200df00-6a34-11eb-943b-7f69ccfed7fe.mp4

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:9

Top GitHub Comments

4reactions

idrisadetunmbicommented, Apr 12, 2021

This is unrelated: but how do I prevent the animations (variants) from running again when there is a rerender? Thanks.

4reactions

justrealmilkcommented, Feb 9, 2021

Okay, I’ve worked it out.

The container with the transition prop of staggerChildren won’t stagger children a second time unless it’s key changes, causing a re-render.

You learn a lot in 7 hours. I guess this is now a documentation request 😛

Top Results From Across the Web

StaggerChildren work only first render at text animation

This way React (and Framer) will know when it's rendering a different element (vs the same element with different data).

Transition | Framer for Developers

When using variants, animations of child components can be staggered by this duration (in seconds). For instance, if staggerChildren is 0.01 , the...

Build a complex staggered and on scroll animation UI - YouTube

In this video you will learn some of the main building blocks of Framer motion like basic animation properties, variants, and gestures like ......

Many tiny animations combined into one, nice side menu.

If I set staggerChildren to 0.015, first child will animate immediately, second with delay ... menuItemVariants are pretty simple, affecting only opacity.

Page Transitions In React - DEV Community ‍ ‍

If it is set to true, it will only render one component at a time. ... First, we'll test it without the exitBeforeEnter...