Animate Gutenberg Blocks On Scroll – Animate Blocks

The Animate Blocks plugin makes use of AOS library to animate any Gutenberg blocks when they’re scrolled into view.

Animations included:

  1. fade
  2. fade-up
  3. fade-down
  4. fade-left
  5. fade-right
  6. fade-up-right
  7. fade-up-left
  8. fade-down-right
  9. fade-down-left
  10. flip-up
  11. flip-down
  12. flip-left
  13. flip-right
  14. slide-up
  15. slide-down
  16. slide-left
  17. slide-right
  18. zoom-in
  19. zoom-in-up
  20. zoom-in-down
  21. zoom-in-left
  22. zoom-in-right
  23. zoom-out
  24. zoom-out-up
  25. zoom-out-down
  26. zoom-out-left
  27. zoom-out-right

How to use it:

1. Search for the plugin name Animate Blocks on the Add Plugins page and enable the plugin on your WordPress website.

2. Create a new Animate Block in the Gutenberg editor.

new Animate Block

3. Insert Gutenberg blocks to be animated.

Gutenberg blocks to be animated

4. Select the Animate Block and choose an animation type on the right side.

choose an animation type

5. Config the scroll animation as per your needs. Possible options:

  • Offset: offset (in px) from the original trigger point
  • Easing: easing function for animations
  • Once: whether the animation should happen only once – while scrolling down
  • Mirror: whether elements should animate out while scrolling past them
  • Anchor placement: defines which position of the element regarding to window should trigger the animation
  • Delay: animation delay
  • Duration: duration of the animation

Config the scroll animation

Preview:

Animate Gutenberg Blocks On Scroll - Animate Blocks

Download WordPress Plugin:

You can download this free WordPress plugin using the download button below. Unless otherwise stated, the WordPress plugin is available under GNU General Public License.

Author: Team Jazz, Liip AG

Homepage: https://wordpress.org/plugins/animate-blocks/

Don’t forget to share this WordPress plugin and also check out other awesome plugins on our site.

Rate This Plugin
Sending
User Review
0 (0 votes)

Leave a Reply