[Resolved] Animated sections?

Home Forums Support Animated sections?

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #300008
    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

    GeneratePress 1.3.46
    #300012
    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.

    #300214
    Tom
    Lead Developer
    Lead Developer

    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.

    #300231
    Ian

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

    #300307
    Tom
    Lead Developer
    Lead Developer
    #1370178
    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?

    #1370582
    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/)

    #1435930
    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. 🙂

    #1435977
    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.

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.