our dev works

Animazing

Simple and customizable React wrapper component for smooth animations.

social

Loading

Source code:

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

Source code:

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

Source code:

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

Source code:

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

Source code:

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

Source code:

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

Source code:

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

Source code:

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

Source code:

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

Source code:

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

Source code:

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

Source code:

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

Source code:

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

Source code:

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

Source code:

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

Source code:

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

Source code:

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

Source code:

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

Source code:

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

Source code:

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

Source code:

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

Source code:

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

Source code:

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

Source code:

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

Source code:

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

Source code:

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

Trigger only once prop

Source code:

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

On the reveal animation you can change the background

Source code:

<Animazing type="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 type="reveal" origin="right" threshold={25}    showInner={true}>
  Reveal Right
</Animazing>
Loading

On the blur animation you can change the blur effect

Source code:

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

Example of parent method usage

Source code:

<Animazing type="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 type="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
  type="scale"
  origin="center"
  threshold={25}
  entryTimingFunction="power4.out"
  leaveTimingFunction="power4.out"
  entryDuration={700}
  leaveDuration={300}
  entryDelay={200}
  leaveDelay={500}
>
  Scale Center
</Animazing>
Loading

Custom animazing. Check GSAP docs for more information for animation's objects

Source code:

<Animazing
  type="custom"
  threshold={25}
  entryTimingFunction="power4.out"
  leaveTimingFunction="power4.out"
  entryDuration={700}
  leaveDuration={300}
  entryDelay={200}
  leaveDelay={500}
  from={{"opacity":0}}
  to={{"opacity":1}}
>
  Custom
</Animazing>
NameTypeDefault ValueRequiredDetails
typestring-yesSpecify which animation to use. Example: "fade"
originstring-yesSpecify the animation variation - see above for full examples
namestring-noSpecify animation name - valid for Custom animazings
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)
fromobject-yes (only for custom)Specify starting styles for custom animation. Check GSAP docs.
toobject-yes (only for custom)Specify ending styles for custom animation. Check GSAP docs.

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

Join our mailing list