useTrail en useChain voor sequenties

useTrail(count, config) maakt count springs die na elkaar animeren, met een instelbare vertraging tussen elke spring. Wanneer de reeks start, animeert het eerste item onmiddellijk, het tweede begint iets later, het derde daarna enzovoort — zo ontstaat een waaiereffect of cascade-effect.

useTrail retourneert een array met springobjecten, één voor elk item in de reeks. Elke spring heeft dezelfde structuur (dezelfde sleutels), maar begint met animeren op een ander tijdstip. Je doorloopt zowel de array van de reeks als je array met items tegelijk om elk geanimeerd item met de bijbehorende spring weer te geven.

Geef een lijst met een trail weer door de array van de reeks te doorlopen: trail.map((spring, i) => React.createElement(animated.div, { style: spring, key: items[i].id }, items[i].content)). Elke animated.div ontvangt zijn eigen springobject, zodat de items na elkaar animeren. De springs worden uitgevoerd in indexvolgorde: 0, 1, 2, 3...

useTrail ondersteunt een schak patroon voor animaties vooruit en achteruit. Geef een booleaanse status open door om de richting te bepalen: wanneer open true is, animeert de trail van verborgen naar zichtbaar; wanneer deze false is, keert de animatie terug van zichtbaar naar verborgen. De trail keert de volgorde automatisch om — de items animeren naar buiten in omgekeerde volgorde (als laatste erin, als eerste eruit).

Het configuratieobject voor useTrail is hetzelfde als voor useSpring: tension, friction en mass. De vertraging tussen items wordt bepaald door hoe lang elke spring nodig heeft om te starten, wat wordt geregeld door de algemene springfysica. Stijvere springs met hogere tension zorgen voor een snellere spreiding; zachtere springs zorgen voor langere cascades.

useSpringRef() maakt een ref die je via de optie ref aan een spring-hook koppelt. Met de ref kan useChain bepalen wanneer die spring start. Je maakt één ref per spring of trail die je in een bepaalde volgorde wilt afspelen: const springRef = useSpringRef(), en geeft deze vervolgens door: useSpring({ ref: springRef, ... }).

useChain([ref1, ref2, ref3], [0, 0.5, 0.8]) voert meerdere springs of trails na elkaar uit. Het eerste argument is een array met springRefs in de volgorde waarin ze moeten worden afgespeeld. Het tweede argument is een array met tijdstempels tussen 0 en 1, die aangeven wanneer elke spring start als fractie van de totale tijdsduur.

In useChain betekent een tijdstempelreeks zoals [0, 0.5] dat spring 1 op 0% van de reeks start en spring 2 op 50%. Het optionele derde argument is de totale tijdsduur in milliseconden (standaard 1000 ms). Met [0, 0.5] en 2000 ms start spring 1 dus op 0 ms en spring 2 op 1000 ms.

Een veelgebruikt patroon: animeer een container die groter wordt met useSpring voor de afmetingen en animeer daarna de items erin die geleidelijk zichtbaar worden met useTrail voor de lijst. Koppel refs aan beide en gebruik vervolgens useChain([sizeRef, trailRef], [0, 0.5]), zodat de container eerst groter wordt en de items halverwege geleidelijk zichtbaar worden. Zo ontstaat een filmische animatie in twee fasen.

useChain is ideaal voor paginatransities. Wanneer je tussen pagina's navigeert, koppel je de afsluitanimatie van de oude pagina aan de binnenkomstanimatie van de nieuwe pagina. De afsluitanimatie wordt eerst voltooid (tijdstempel 0), waarna de binnenkomstanimatie begint (tijdstempel 0.6). Zo ontstaat een soepele overgang in plaats van een abrupte wisseling.

useTrail kan parallax-scrolleffecten maken door items met verschillende snelheden te animeren op basis van hun positie in de trail. Items die verderop in de trail staan, beginnen later en kunnen een andere configuratie hebben (met lagere tension), waardoor ze langzamer bewegen. Deze tijdsturing op basis van diepte bootst het parallax-effect na van objecten op verschillende afstanden.

useTrail(count, config) maakt count springs die na elkaar animeren en zo trapsgewijze binnenkomsten van lijsten creëren. Door de trail en de items tegelijk met map te doorlopen, kun je ze weergeven. useSpringRef() maakt refs die useChain gebruikt om de volgorde te bepalen. useChain([ref1, ref2], [0, 0.5]) orkestreert meerdere springs met tijdstempels als fracties van de totale tijdsduur. Samen maken ze complexe reeksen in meerdere fasen mogelijk, zoals animaties waarbij eerst iets uitvouwt en daarna zichtbaar wordt.