fresh animation library for you to make smooth animation for your projects

Fresh Animation

scroll Down for Using

Fade
Copy
<div data-freshAnimation="fadeUp" class="freshAnimation"></div>
<div data-freshAnimation="fadeDown" class="freshAnimation"> </div>
<div data-freshAnimation="fadeLeft" class="freshAnimation"></div>
<div data-freshAnimation="fadeRight" class="freshAnimation"></div>
<div data-freshAnimation="fadeUpLeft" class="freshAnimation "></div>
<div data-freshAnimation="fadeUpRight" class="freshAnimation "></div>
Flip
<div data-freshAnimation="flipLeft" class="freshAnimation "></div>
<div data-freshAnimation="flipRight" class="freshAnimation "></div>
<div data-freshAnimation="flipUp" class="freshAnimation "></div>
<div data-freshAnimation="flipDown" class="freshAnimation "></div>
Zoom
<div data-freshAnimation="zoomIn" class="freshAnimation "></div>
<div data-freshAnimation="zoomInUp" class="freshAnimation "></div>
<div data-freshAnimation="zoomInDown" class="freshAnimation "></div>
<div data-freshAnimation="zoomInRight" class="freshAnimation "></div>
<div data-freshAnimation="zoomInLeft" class="freshAnimation "></div>
Custom
<div data-freshAnimation="fadeUp" data-time="1500" class="freshAnimation"></div>

Duration

You can customize the timing animation with Tailwind duration classes, for example duration-1000 or duration-0.

<div data-freshAnimation="fadeUp" data-time="1500" data-timingFunction="ease-in" class="freshAnimation"></div>

transition Timing Function

You can customize transition timing function utilities for controlling the easing of CSS transitions, such as ease-linear, ease-in, ease-out, ease-in-out, and ease-initial.

<div data-freshAnimation="fadeUp" data-time="1500" data-timingFunction= "ease-in" data-delay="500" class="freshAnimation"></div>

transition delay

You can customize transition delay utilities for controlling the delay before a CSS transition starts, such as delay-75, delay-100, delay-150, delay-200, delay-300, delay-500, or delay-700, using values in seconds or milliseconds.