This won't be the last time | Component renaming and internal animation component changes

For this release we've broken a few things - sorry!

Component renaming

FLIPMove to Move

FLIPMove has been renamed to Move - as it should be the default animation we want to reach to for moving something from one place to another - FLIP is just an implementation detail :).

-import { FLIPMove } from 'yubaba';
+import { Move } from 'yubaba';

This also means if you were using Move previously - it's now known as CrossFadeMove.

-import { Move } from 'yubaba';
+import { CrossFadeMove } from 'yubaba';

Target to FocalTarget

Target has also been renamed to a more specific one - FocalTarget. The rationale for this is it's both what we actually call it in the docs, and "focal" is a common term used within Material Design animations. Win win!

-import { Target } from 'yubaba';
+import { FocalTarget } from 'yubaba';

Baba prop name change

The Baba component had one of its props renamed.

import { Baba } from 'yubaba';

<Baba
-  TIME_TO_WAIT_FOR_NEXT_BABA={300}
+. timeToWaitForNextBaba={300}
/>

Animation wait

Wait was available on a few components. The prop has been removed now - it was never actually utilized anywhere.

import { CrossFadeMove, FadeMove, Move } from 'yubaba';

<CrossFadeMove
-  wait={300}
/>

<FadeMove
-  wait={300}
/>

<Move
-  wait={300}
/>

Helper function rename

getElementSizeLocation was renamed to getElementBoundingBox.

-import { getElementSizeLocation } from 'yubaba';
+import { getElementBoundingBox } from 'yubaba';

Animation component changes

This only affects developers who have written their own components (hello - is anyone out there? ;)). Because of the renaming of Target to FocalTarget - it was also prime to bring some consistency to the props passed to the animation components.

AnimationCallback

The callback provided to Collector has had some of its values changed. This is only used internally inside animation components.

beforeAnimate: AnimationCallback = (data, onFinish, setChildProps) => {};

{
-containerElement: HTMLElement;
+element: HTMLElement;
+elementBoundingBox: GetElementSizeLocationReturnValue;
-targetElement: HTMLElement | null | undefined;
+focalTargetElement: HTMLElement | null | undefined;
-targetDOMData: GetElementSizeLocationReturnValue | undefined;
+focalTargetElementBoundingBox: GetElementSizeLocationReturnValue | undefined;
render: CollectorChildrenAsFunction;
-...GetElementSizeLocationReturnValue
}

See the Move animation for some example uses.