[Support request] Scroll Animations with GeneratePress

[daniel]

Hi all,

After having built sites by hand and sites with pages builders (Oxygen and Webflow) I’ve decided to give GeneratePress and guttenberg block editor so as to put out sites faster then building them from scratch each time.

Question time: How on earth do you get scroll animations, I presume wow.js should work but how do you get it to run.

Where do you place <link rel=”stylesheet” href=”css/animate.css”> and <script src=”js/wow.min.js”></script> <script>new WOW().init();</script>

I know how to do it by coding manually but with wordpress I’m completely lost.

[Tom]

Hi there,

There are a few ways to do this.

The easiest would be to use our Hook Elements: https://docs.generatepress.com/article/hooks-element-overview/

The CSS can go in the wp_head hook, and the JS could go into the wp_footer hook.

Both URLs would need to be absolute – they can’t be relative like that.

Another option would be to use the wp_enqueue_style() and wp_enqueue_script() WordPress functions that are meant to enqueue assets like this:
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
https://developer.wordpress.org/reference/functions/wp_enqueue_script/

Hope this helps! 🙂

[Elizabeth]

Hi Tom,

I’m trying to use wow.js and animate.css to add a few scroll animations in my new site too, but am a bit more of a novice than the person who started this thread (been spoiled by awesome GP for all my projects going on three years! Now loving the Generate Blocks too). I’ve copied the wow.js and animate.css to my theme files in the child theme. When you say “the CSS can go in the wp-head hook, and the JS could go into the wp_footer hook. Both URLs would need to be absolute – they can’t be relative like that.” I’m confused what to add into the hook to get it to work. Please help!

[Elvin]

Hi there,

What Tom meant was something like this:

Say, for example, you have wow.js and animate.css saved on https://yoursite.com/wp-content/uploads/, you can use the Hook Element to insert them on your page.

You have to create 2 Hook elements. 1 for animate.css and another for wow.js.

For animate.css:
You can place something like this on the Hook Element’s code area.
<link rel="stylesheet" href="https://yoursite.com/wp-content/uploads/animate.css" media="all">

You then set the Hook to “wp_head” as Tom mentioned. And then set the display rule to “entire site” or specify the pages you want this to run on.

For wow.js:
You can place something like this on the Hook Element’s code area.
<script src="https://yoursite.com/wp-content/uploads/wow.js" type="text/javascript"></script>

You then set the Hook to “wp_footer” as Tom mentioned. And then set the display rule to “entire site” or specify the pages you want this to run on.

[Elizabeth]

Thanks Elvin,

I was able to easily follow your instructions, but unfortunately still can’t get it to work :/. I also copied the wow.js and animate.css files to the child theme folder and was able to get it to work in the header by manually placing the code, but it won’t work on the rest of the pages or other sections. What am I missing?

[Elizabeth]

[Elvin]

We’re not exactly sure how wow.js works (it’s out of our scope to be frank) but normally, library scripts have init scripts to run the library.

I recommend reading their docs for instructions.
https://wowjs.uk/docs.html

And if I may suggest something you may like:

My personal favorite for things like that is AOS. https://michalsnik.github.io/aos/

[Elizabeth]

AOS is super cool, that would work just as well! From the installation instructions on their gh it looks similar, so I’d use hooks as well? I’ll try that instead…

[Elvin]

Yeah use hooks.

Reminder: JS goes to wp_footer. CSS goes to wp_head.

[Daniel]

There is a similar but more improved solution provided by animate-on-scroll.
The css file to link to in the header hook for this is:
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
and the js file to link to in the footer hook is:

<script src="https://unpkg.com/aos@next/dist/aos.js" type="text/javascript"></script>
<script>
  AOS.init();
</script>

(Note – you must initialize the js file in the hook too ~ correct me if I’m wrong here)
The short-list of default animation names are found here:
https://michalsnik.github.io/aos/
and for a more complete explanation, you can go here:
https://github.com/michalsnik/aos

The only major difference with this technique is that you need to add custom attributes (under the Advanced button in the Generate Block Editor)
For Example:
Advanced >
Custom Attributes

 ________      _________
|data-aos|    |fade-left|
 --------      ----------

This adds the necessary classes to trigger the desired animation upon scroll.

VERY SATISFIED with this technique

[Annamari]

Hi Daniel,

This sounds amazing! Could you share more information about how you add the custom attributes to the block editor?
Is it possible to simply add this to Gutenberg?

Thank you!

[Luca]

Hey Annamari, custom attributes can be added to sections, buttons and headings if you have GenerateBlocks Pro
https://generateblocks.com/pro/#pro-features

[Annamari]

Hi Luca, thanks! 🙂

[Annamari]

Found this, I’ll give it a try: https://wordpress.org/plugins/attributes-for-blocks/

EDIT: It works!!!

[Author]

Posts