Ionic-framework: bug: react animations CreateAnimation component not working and wrongly documented

[nmobregon]

Bug Report

Ionic version:
[x] 4.x

Current behavior:
CrateAnimation tag expects only one element in fromTo attribute

Expected behavior:
fromTo?: PropertyValue; is expected to be fromTo?: PropertyValue[]; in CreateAnimationProps based on the documentation

Steps to reproduce:
follow this documentation example found in https://ionicframework.com/docs/utilities/animations:

Related code:

<CreateAnimation
  duration={1500}
  iterations={Infinity}
  fromTo={[
    { property: 'transform', fromValue: 'translateX(0px)', toValue: 'translateX(100px)' },
    { property: 'opacity', fromValue: '1', toValue: '0.2' }
  ]}
>
  ...
</CreateAnimation>

Other information:
Also this code didn't work, I was expecting a simple animation and nothing happened when the component loaded

<CreateAnimation
  duration={1000}
  fromTo={{
    property: 'opacity', 
    fromValue: '1', 
    toValue: '0'
  }}
>
    <div>example animation</div>
</CreateAnimation>

Ionic info:

Ionic:

   Ionic CLI       : 6.2.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.0.5

Capacitor:

   Capacitor CLI   : 1.5.1
   @capacitor/core : 1.5.1

Utility:

   cordova-res : not installed
   native-run  : 0.3.0

System:

   NodeJS : v10.15.3 (/usr/local/bin/node)
   npm    : 6.4.1
   OS     : macOS Mojave

[liamdebeasi]

Thanks for the issue. The first issue just looks like a type error on our end. You can work around it for now by typecasting your fromTo array as any.

The second issue is not a bug. Since Ionic Animations are programmatically controlled you need to explicitly set play={true} on CreateAnimation otherwise the animation will remain paused.

[nmobregon]

Thanks @liamdebeasi !
I'll just wait for an update on the first issue, and please also check the import line in the examples
import { createAnimation, Animation } from '@ionic/react';
should be
import {CreateAnimation } from '@ionic/react';

About the second one, thank you very much, my bad, didn't find that on the docs. Now it's working :)

Thank you!

[liamdebeasi]

Thanks! I will update the docs so the play requirement is clearer (also will fix the import).

For the first issue, here is a dev build you can use for now npm i @ionic/[email protected].

[nmobregon]

You're my today's favorite person. Thanks again

[liamdebeasi]

Thanks for the issue! This has been resolved via https://github.com/ionic-team/ionic/pull/20775 and will be available in an upcoming release of Ionic Framework.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.