Squashing bugs like I'm on a Safari | Bug fixes and more

This release primarily fixes a boat load of issues with Safari. Most of the issues have now been fixed. clip-path with transform or position: relative is still a problem, see #133.

Fixes

reshaping-container: fixes children to move with container (0d3b762)
motion: fixes motions flickering when animating (143a40a)
motion: now waits for images to load to ensure not having dimensions of zero (143a40a)
reveal: fixes reveal in safari (ec29c7c)

Features

fade-move: adds props to disable scaling (a3dbf96)
move: adds props to disable scaling (56141f1)
move: adds new prop to set stacking context on move motion (68d5b60)

What's in a name?... | Library name change

yubaba has been renamed to element-motion. There are no differences between the libraries - other than the name itself.

-import Animator from 'yubaba';
+import Animator from '@element-motion/core';

yubaba is now deprecated on npm.

Less is more | Self targeted animations no longer need name

Small but sweet release today. Really great change for the api - you can remove name prop now when doing self targeted animations!

({ size }) =>
  <Animator
-    name="change-size"
    triggerSelfKey={size}
  />

To have this a possibility we've removed the need for name being required in the typedefs - however you'll get a runtime warning if you're not using name when you should be.

This just in - key abuse halted! | First class support for self targeted animations

Instead of abusing key we now have first class support for self targeted animations.
Simply replace all uses of key with triggerSelfKey - enjoy 😺

Names are such a fickle thing | Renames (and some fixes)

A few components have been renamed. Their original names still exist but have been deprecated.

Features 💡

VisibilityManager

• Renamed from BabaManager
• Now you can have visibility start from visible using the isInitiallyVisible prop

FocalConcealMove

• Renamed from ConcealMove

Deprecation notices ❗

• BabaManager export will be removed next major version
• ConcealMove export will be removed next major version

Fixes 🐛

• ReshapingContainer now correctly passes max-height in style to the children function
• ReshapingContainer and RevealReshapingContainer now trigger animations with triggerKey - change this key anytime something could have changed the size of the children

Easy gets easier | Reshaping components, updated docs, and fixes! 🧙✨

Two brand new components this release. Some old components that are actually documented now. And some bug fixes.

Enjoy! 🎉

Ooh, shiny! ✨✨

ReshapingContainer 🎨

Note - This is a new type of component ("composite"). They will be made up of one or more animations, and some extra spice 🌶 to give a great drop-in and use ASAP experience for developers.

A composite component that is made up of the Move animation and some extra markup for the floating background. It has been made to be able to efficiently have the parent container resize around its children after state changes.

This is useful for anything where you want the background to nicely reshape itself around its children, for example a hover menu!

Note - Yes the children bleed outside of the container. Yes it's intended. This component does one thing - reshape the background to the size of the children on state changes. It's up to you to do something with the children 😊

import { ReshapingContainer } from 'yubaba';

<ReshapingContainer id="hello-world">
  {props => <div {...props}>hello, world!</div>}
</ReshapingContainer>

RevealReshapingContainer 👀 🎨

Another composite component that is made up of SimpleReveal and ReshapingContainer. It will do everything the reshaping container does plus keeping the children within the container when resizing.

This is useful for any experience that does not change its position, only dimensions. For example a modal dialog!

import { RevealReshapingContainer } from 'yubaba';

<RevealReshapingContainer id="hello-world">
  {props => <div {...props}>hello, world!</div>}
</RevealReshapingContainer>

Reveal 👀

Will reveal the destination element from the origin size to the destination size using clip-path only which will not work for IE11.

import Baba, { Reveal } from 'yubaba';

<Baba name="reveal">
  <Reveal>
    {props => <div {...props}>hello, world!</div>}
  </Reveal>
</Baba>

FocalReveal 🎯 👀

Note - Actually not new, just documented now

Will reveal a container around a marked focal element using width and height, or alternatively clip-path. See FocalRevealMove for what this looks like.

This component requires the use of a FocalTarget to mark the focal element.

import Baba, { FocalReveal, FocalTarget } from 'yubaba';

<Baba name="focal-reveal">
  <FocalReveal>
    {props => (
      <div {...props}>
        hello, world!
        <FocalTarget>{target => <img src="./my-image.jpeg" {...target} />}</FocalTarget>
      </div>
    )}
  </FocalReveal>
</Baba>

FadeMove 💨

**Note -**Actually not new, just documented now

Will clone the origin element and position it absolutely then animate it ontop of the destination element, while fading out.

Generally you'd want to use Move or CrossFadeMove over this.

import Baba, { FadeMove } from 'yubaba';

<Baba name="reveal">
  <FadeMove>
    {props => <div {...props}>hello, world!</div>}
  </FadeMove>
</Baba>

Fixes

Deprecation notice - RevealMove has been renamed to FocalRevealMove. You can still use it as RevealMove for now, but will be removed in the next major release.

• Baba will no longer send their own data to a parent Baba now
• RevealMove has been renamed to FocalRevealMove

Chores

• README has been given some love, primarily around the value prop area
• yubabajs.com now groups components by type (focal, supporting, composite.. etc)

I can't believe it's not springs | Dynamic duration

This release introduces the concept of dynamic duration which is enabled by default for all animations. The duration is increased/decreased using the size of the target element, whether the element is collapsing or expanding, and how far it has to travel across the screen. Like to dip into code? Here's where the goods are!

Don't want dynamic duration? That's okay too. Pass duration as usual to the animation component to override it.

For example:

<Move duration={500}>
  ...
</Move>

Have fun! 💯💯💯💯

P.S. This release also loosens the peer dependency requirements of react, react-dom, and emotion.

Invalidated | Small performance tweaks

Released thanks to #89.

Two changes in this small release:

• fires animation execution on the next frame to avoid too much work in one tick
• don't set state if we can avoid it to prevent unneeded state changes

Enjoy 🎉

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.

Compose likes its 2020 | New composable motion API

Composable animations (#75) have now been released, which means animations can now compose styles from other animations that executed before.

animate: AnimationCallback = (data, onFinish, setTargetProps) => {
  setTargetProps({
-   style: { display: 'none' },
+   style: prevStyles => ({ ...prevStyles, display: 'none' }),
  });
};

This also introduces two new animations, Reveal, and FadeMove. Both of these animations do one thing, and do it well. They are utilised in both RevealMove and CrossFadeMove.

Reveal

Docs | Props

Reveals the destination element container from the Target component.
A limitation at the moment is the destination element must have an animation defined,
if you don't want one to happen use the Noop animation.
Requires the use of the Target component to specify the focal element.

// origin-element.js
import Baba, { Reveal, Target } from 'yubaba';

<Baba name="reveal">
  <Reveal>{baba => <div {...baba} />}</Reveal>
</Baba>;

// destination-element.js
import Baba, { Target, Noop } from 'yubaba';

<Baba name="reveal">
  <Noop>
    {baba => (
      <div {...baba}>
        <Target>{target => <div {...target} />}</Target>
      </div>
    )}
  </Noop>
</Baba>;

FadeMove

Docs | Props

Will position: absolute move the origin element to the destination element while fading out.

// origin-element.js
import Baba, { FadeMove } from 'yubaba';

<Baba name="fade-move">
  <FadeMove>{baba => <div {...baba} />}</FadeMove>
</Baba>;

// destination-element.js
import Baba from 'yubaba';

<Baba name="fade-move">{baba => <div {...baba} />}</Baba>;