FadeIn & FadeOut

0.00s / 3.97s · F0

FadeIn

Animates children from opacity: 0 to opacity: 1 over the given duration.

Props

Prop	Type	Description
duration	number	Length of the animation in frames
children	ReactNode	Elements to fade in

Example

<FadeIn duration={30}>
  <Circle cx={200} cy={150} r={60} fill="#4f9eff" />
</FadeIn>

FadeOut

Animates children from opacity: 1 to opacity: 0 over the given duration.

Props

Prop	Type	Description
duration	number	Length of the animation in frames
children	ReactNode	Elements to fade out

Example

<FadeOut duration={30}>
  <Circle cx={200} cy={150} r={60} fill="#ff6b6b" />
</FadeOut>

Code Example

React

import { Player, FadeIn, FadeOut, Sequence, Circle, Text } from '@elucim/core';

<Player width={500} height={250} fps={30} durationInFrames={90}>
  <FadeIn duration={30}>
    <Circle cx={125} cy={125} r={50} stroke="#6c5ce7" strokeWidth={3} fill="rgba(108,92,231,0.2)" />
  </FadeIn>
  <Sequence from={60} durationInFrames={30}>
    <FadeOut duration={30}>
      <Circle cx={375} cy={125} r={50} stroke="#ff6b6b" strokeWidth={3} fill="rgba(255,107,107,0.2)" />
    </FadeOut>
  </Sequence>
</Player>

DSL JSON

{
  "width": 500, "height": 250, "fps": 30, "durationInFrames": 90,
  "children": [
    {
      "type": "circle", "cx": 125, "cy": 125, "r": 50,
      "stroke": "#6c5ce7", "strokeWidth": 3, "fill": "rgba(108,92,231,0.2)",
      "fadeIn": { "duration": 30 }
    },
    {
      "type": "circle", "cx": 375, "cy": 125, "r": 50,
      "stroke": "#ff6b6b", "strokeWidth": 3, "fill": "rgba(255,107,107,0.2)",
      "fadeOut": { "duration": 30 }
    }
  ]
}