our dev works

Animazing

Simple and customizable React wrapper component using plain CSS transitions and animations.

Let’s get social

Loading

Source code:

<Animazing name="fade" origin="top" threshold={25}    >
  Fade Top
</Animazing>
Loading

Source code:

<Animazing name="fade" origin="bottom" threshold={25}    >
  Fade Bottom
</Animazing>
Loading

Source code:

<Animazing name="fade" origin="left" threshold={25}    >
  Fade Left
</Animazing>
Loading

Source code:

<Animazing name="fade" origin="right" threshold={25}    >
  Fade Right
</Animazing>
Loading

Source code:

<Animazing name="show" origin="top" threshold={25}    >
  Show Top
</Animazing>
Loading

Source code:

<Animazing name="show" origin="bottom" threshold={25}    >
  Show Bottom
</Animazing>
Loading

Source code:

<Animazing name="show" origin="left" threshold={25}    >
  Show Left
</Animazing>
Loading

Source code:

<Animazing name="show" origin="right" threshold={25}    >
  Show Right
</Animazing>
Loading

Source code:

<Animazing name="scale" origin="center" threshold={25}    >
  Scale Center
</Animazing>
Loading

Source code:

<Animazing name="scale" origin="left" threshold={25}    >
  Scale Left
</Animazing>
Loading

Source code:

<Animazing name="scale" origin="right" threshold={25}    >
  Scale Right
</Animazing>
Loading

Source code:

<Animazing name="reveal" origin="top" threshold={25}    >
  Reveal Top
</Animazing>
Loading

Source code:

<Animazing name="reveal" origin="bottom" threshold={25}    >
  Reveal Bottom
</Animazing>
Loading

Source code:

<Animazing name="reveal" origin="left" threshold={25}    >
  Reveal Left
</Animazing>
Loading

Source code:

<Animazing name="reveal" origin="right" threshold={25}    >
  Reveal Right
</Animazing>
Loading

Source code:

<Animazing name="blur" origin="center" threshold={25}    >
  Blur Center
</Animazing>
Loading

Source code:

<Animazing name="blur" origin="top" threshold={25}    >
  Blur Top
</Animazing>
Loading

Source code:

<Animazing name="blur" origin="bottom" threshold={25}    >
  Blur Bottom
</Animazing>
Loading

Source code:

<Animazing name="blur" origin="left" threshold={25}    >
  Blur Left
</Animazing>
Loading

Source code:

<Animazing name="blur" origin="right" threshold={25}    >
  Blur Right
</Animazing>
Loading

Source code:

<Animazing name="hinge" origin="top" threshold={25}    >
  Hinge Top
</Animazing>
Loading

Source code:

<Animazing name="hinge" origin="bottom" threshold={25}    >
  Hinge Bottom
</Animazing>
Loading

Source code:

<Animazing name="hinge" origin="left" threshold={25}    >
  Hinge Left
</Animazing>
Loading

Source code:

<Animazing name="hinge" origin="right" threshold={25}    >
  Hinge Right
</Animazing>
Loading

Source code:

<Animazing name="hinge" origin="center-x" threshold={25}    >
  Hinge Center-x
</Animazing>
Loading

Source code:

<Animazing name="hinge" origin="center-y" threshold={25}    >
  Hinge Center-y
</Animazing>
Loading

Trigger only once prop

Source code:

<Animazing name="show" origin="top" threshold={25} triggerOnce={true}   >
  Show Top
</Animazing>
Loading

On the reveal animation you can change the background

Source code:

<Animazing name="reveal" origin="bottom" threshold={25}  background="#000"  >
  Reveal Bottom
</Animazing>
Loading

On the reveal animation you can also change the behaviour of the inner opacity - whether or not to show the element before the revealing block finishes

Source code:

<Animazing name="reveal" origin="right" threshold={25}    showInner={true}>
  Reveal Right
</Animazing>
Loading

On the blur animation you can change the blur effect

Source code:

<Animazing name="blur" origin="center" threshold={25}   blur={100} >
  Blur Center
</Animazing>
Loading

Example of parent method usage

Source code:

<Animazing name="fade" origin="top" threshold={25}>
  Fade Top

  <Animazing name="show" origin="bottom" method="parent">Show Bottom</Animazing>
</Animazing>
Loading

Example of custom trigger method usage with button. Note that you need to provide animate prop to trigger the animation

Source code:

const [trigger, setTrigger] = useState(false);
return (
  <button onClick={() => setTrigger(!trigger)}>
    Click to trigger
  </button>

  <Animazing name="reveal" origin="left" method="custom" animate={trigger}>
    Reveal Left Custom
  </Animazing>
)
Loading

Here are the props controlling the behaviour of the animation. This props can be used for all animations. You can either specify custom options here or you can use config file to specify globally (see above). Full list of all props are available in the table below

Source code:

<Animazing
  name="scale"
  origin="center"
  threshold={25}
  entryTimingFunction="cubic-bezier(0.175, 0.885, 0.320, 1.275)"
  leaveTimingFunction="cubic-bezier(0.4, 0.14, 0.3, 1)"
  entryDuration={700}
  leaveDuration={300}
  entryDelay={200}
  leaveDelay={500}
>
  Scale Center
</Animazing>
Loading
NameTypeDefault ValueRequiredDetails
namestring-yesSpecify which animation to use. Example: "fade"
originstring-yesSpecify the animation variation - see above for full examples
methodstring'observe'noChoose the trigger of the animation. Possible options:
  • 'observe' - the default. Trigger the animation using Intersection Observer relative to the viewport
  • 'parent' - trigger animation based on parent. Useful for nested animations. The child animation will be triggered after the animation of the parent
  • 'custom' - custom trigger. Note that you will need to supply the animation with 'animate' prop. See above for example
thresholdnumber0noThe option has effect only in 'observe' method! This controls when to trigger the animation based on the visibility portion of the element in the viewport. The default is 0 which means that as soon as 1px of the element is visible the animation will be triggered. The values are in % of the viewport.
entryDelaynumberinconfignoDefine the amount of delay on animation entry (in ms)
leaveDelaynumberinconfignoDefine the amount of delay on animation leave (in ms)
entryDurationnumberinconfignoDefine the duration of the animation on entry (in ms)
leaveDurationnumberinconfignoDefine the duration of the animation on leave (in ms)
entryTimingFunctionstringinconfignoDefine the timing function to use on animation entry.
leaveTimingFunctionstringinconfignoDefine the timing function to use on animation leave.
backgroundstringinconfignoThis is valid for 'reveal' animation. Defines the revealing block background
showInnerbooleanfalsenoThis is valid for 'reveal' animation. Defines the behaviour of the inner opacity. See the example above
blurnumberinconfignoThis is valid for 'blur' animation. Defines the amount of blur effect (in px)

Why use this plugin?

  1. 01

    Simplicity

    Easy to integrate and use. You only need to include it, wrap the elements you want to animate and provide your options!

  2. 02

    User Configuration

    You can customize animations easily with config file based on your preferences

  3. 03

    Nesting

    Nested animations are piece of cake with the parent method prop

  4. 04

    Custom triggers

    The way to trigger your animation is up to you with the custom method prop

Join our mailing list