Demo

https://navapro.dev5.dev/elements/content-elements/animated-content

You can create contents with animation effects. The content will animate when it comes in view.
You can add following type of animation effect to your content.
  • Fade In
  • Fade In Up
  • Fade In Left
  • Fade In Right
  • Fade In Down
  • Zoom
  • Bounce
  • Bounce Up
  • Flip

Animation on mobile / tablet devices

These content animation effects will be active only on devices with minimum 992px width. This means it will not be active on mobile and tablet devices.

This has been done to improve website performance on small devices.

Enable Animation

You can enable / disable content animation effect from theme settings page.

Administration > Appearance > Appearance settings > NavaPro

example.com/admin/appearance/settings/navapro

image

Add Fade In Effect To Your Content

Put your content inside a div with class animate-fadeIn

<div class="animate-fadeIn">
-- Your content here --
</div>

Add Fade In Up Effect To Your Content

Put your content inside a div with class animate-fadeInUp

<div class="animate-fadeInUp">
-- Your content here --
</div>

Add Fade In Left Effect To Your Content

Put your content inside a div with class animate-fadeInLeft

<div class="animate-fadeInLeft">
-- Your content here --
</div>

Add Fade In Right Effect To Your Content

Put your content inside a div with class animate-fadeInRight

<div class="animate-fadeInRight">
-- Your content here --
</div>

Add Fade In Bottom Effect To Your Content

Put your content inside a div with class animate-fadeInDown

<div class="animate-fadeInDown">
-- Your content here --
</div>

Add Zoom Effect To Your Content

Put your content inside a div with class animate-zoom

<div class="animate-zoom">
-- Your content here --
</div>

Add Bounce Effect To Your Content

Put your content inside a div with class animate-bounce

<div class="animate-bounce">
-- put your content here --
</div>

Add Bounce Up Effect To Your Content

Put your content inside a div with class animate-bounceUp

<div class="animate-bounceUp">
-- put your content here --
</div>

Add Flip Effect To Your Content

Put your content inside a div with class animate-flip

<div class="animate-flip">
-- put your content here --
</div>

Animation effect to images and other elements

You can add animation effect to other elements also like images, headings, paragraph, table, form etc.

Example:

Fade In effect to image.


<img class="animate-fadeIn" src="/images/car.jpg" alt="image" />

Example:

Fade In Down effect to heading.


<h1 class="animate-fadeInDown">This is Heading One</h1>

Example:

Fade In Up effect to paragraph.


<p class="animate-fadeInUp">Your content here..</p>

Add Delay To Animation

You can delay an animation effect when it comes in view. Element animation can be delayed by 0.5 / 1 / 2 / 3 / 4 / 5 seconds.

  • To delay animation by 0.5 second add class delay to the element.
  • To delay animation by 1 second add class delay-1s to the element.
  • To delay animation by 2 second add class delay-2s to the element.
  • To delay animation by 3 second add class delay-3s to the element.
  • To delay animation by 4 second add class delay-4s to the element.
  • To delay animation by 5 second add class delay-5s to the element.

Example:

Add Fade In animation effect with 1 second delay.

<div class="animate-fadeIn delay-1s">
-- Your content here --
</div>

Speed Of Animation

You can also control the speed of animation.

  • For fast speed add class fast to the element.
  • For faster speed add class faster to the element.
  • For slow speed add class slow to the element.
  • For slower speed add class slower to the element.

Example:

Add Fade In animation effect with slower speed.

<div class="animate-fadeIn slower">
-- Your content here --
</div>

Our Recommendation

We recommend to create and use a new text input format like Full HTML but without CKEditor editor.