[Resolved] Animated sections?

[Ian]

I have a page made of sections. Other than the parallax effect, is there anything that will animate the sections when they appear, eg. slide in from the left/right, etc

[Roberto Enrique]

Better than animating the sections themselves is to animate its contents.

You can use wow.js for that:

http://mynameismatthieu.com/WOW/

Just create a child theme and add the .js and .css files and then you just need to add the classes to your content as needed.

[Tom]

Great suggestion, Roberto!

If you wanted to animate the entire section, you would need to use some sort of animation library and then apply the animations to your section IDs.

[Ian]

Thank you to you both. I also found Animate It! which works with content inside sections.

[Tom]

Awesome 🙂

[Sergio]

CSS animations for Gutenberg:

https://wordpress.org/plugins/blocks-animation/

EDIT: Doesn´t work with GenerateBlocks!! It’s a pity because it’s a simple plugin and gives a lot of freshness to the web. Any solution please?

[Sergio]

This plugin works fine with Generate Blocks:

https://wordpress.org/plugins/animated-blocks/

But I think is better the plugin mentioned above (https://wordpress.org/plugins/blocks-animation/)

[Eric]

Built-in compatibility of GenerateBlocks with the Blocks Animation plugin (https://wordpress.org/plugins/blocks-animation/) would be cool. In the meantime, a workaround to use Blocks Animation with GenerateBlocks is to just manually add the CSS classes generated by Blocks Animation to your GenerateBlock. For example, you could do this:

1. Create a regular block and assign the “Bounce In Down” animation to it (using the Blocks Animation plugin)
2. View the page with your browser’s inspector to see what CSS classes were added (in this case it would be “animated bounceInDown”
3. Create a GenerateBlock and add “animated bounceInDown” as CSS classes in the “Advanced” section

You could probably just figure out the class names for many of the other animations and skip steps 1 and 2 most of the time, too. 🙂

[Ricardo]

Thank you so much for the workaround, @Eric. It was pretty useful.

I’d like to say that I’m using Generateblocks for the first time and I’m loving it. It looks very promising.

[Author]

Posts