How to use AOS with WordPress

You’ve gotta admit, websites that correctly use animation as you scroll down the page just feel pro. So if you’re like me and have your own WordPress theme, you start Googling how to add animation to WordPress – WITHOUT another plugin!

Guess what? The solution is easy. You can animation to your WordPress theme a lot easier than you might think by using AOS (Animate on Scroll) by Michał Sajnóg. I’ve added basic animations to the home page of Follow Hook.

Let’s not waste time! Here are the steps to integrate AOS with WordPress:

1) Enqueue JS and CSS

If you’re new to referencing javascript or CSS files in WordPress, the correct way to do it is by enqueuing them into your theme. Don’t manually place them in the header or footer of your site – as tempting as that may be!

To enqueue the files, edit the functions.php file of your theme. This is found in the root of your WordPress installation.

Add the following to your functions.php file:

add_action( 'wp_enqueue_scripts', 'add_aos_animation' );
function add_aos_animation() {
wp_enqueue_style('AOS_animate', 'https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css', false, null);
wp_enqueue_script('AOS', 'https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js', false, null, true);
wp_enqueue_script('theme-js', get_template_directory_uri() . '/js/theme.js', array( 'AOS' ), null, true);
}

Free Tip: I’m a Mac guy, and my favorite sFTP client is ForkLift3. Favorite code editor is Atom. These are just perfect. If you’re on the hunt, check them out!

2) Create Javascript Initialization

The first two lines use the CDN files. Now, you can also host them yourself, and then adjust the paths above. To do that, simply download the source files from Michal’s site (scroll to the bottom): https://michalsnik.github.io/aos/

The third line you added to your functions.php (theme.js) specifies a file you need to create and add to your theme. When adding AOS to a non-WordPress site, you’d initiate the script in your page with the following line:

<script> AOS.init(); </script>

For WordPress, we add this to a javascript file, and enqueue it like everything else. So in your code editor simply create a file called theme.js, and place the following line in it (don’t include the <script> tags here):

AOS.init();

Now save that in a ‘js’ folder in the root of your theme. Notice the third line that you added to your functions.php file — It is looking for a theme.js file in the template directory (your theme) and the js folder. Obviously, you can customize any of that. Just make sure the file is located where you have WordPress looking for it.

3) Use AOS in Your WordPress Theme

Now it’s time to use AOS WordPress. And this part is easy!

Example: Let’s say you have two div containers that are side by side on a page. Their classes are simply ‘box-one’ and ‘box-two.’ One has an image and one contains text. And you’re using flex-box or float to have them side by side on the page (we’re not showing that styling here).

The code would look something like this:

<div class="box-one">
<img src="myimage.jpg">
</div>
<div class="box-one">
A paragraph is here.
</div>

Add AOS Animation

Now let’s say you want to have the image box fade in from above and the text fade in from below when someone reaches this point on your page. You add AOS animation with ‘data-aos’ and then a variable like ‘fade-up.’

That same code, using AOS would look like this:

<div class="box-one" data-aos="fade-down">
<img src="myimage.jpg">
</div>
<div class="box-one" data-aos="fade-up">
A paragraph is here.
</div>

Specify AOS Duration

AOS has default times for things like delay and animation. You can adjust these inline with ‘data-aos-duration’ and ‘data-aos-delay.’ The setting is in milliseconds, and can only be a value from 50-3000 in increments of 50. Don’t make make my mistake and slap on a value of 4000 and wonder why it wasn’t working!

Here’s how the code would look to specify duration and delay:

<div class="box-one" data-aos="fade-down" data-aos-duration='1500' data-aos-delay='500'>
<img src="myimage.jpg">
</div>
<div class="box-one" data-aos="fade-up" data-aos-duration='1500' data-aos-delay='1000'>
A paragraph is here.
</div>

In the above example, the image container would animate slightly before the text container. There are other parameters you can change like offset, easing, how many times it executes, etc.

Here’s a list of all the animation attributes with random values:

data-aos="fade-up"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="false"
data-aos-anchor-placement="top-center"

4) Set Global AOS Parameters

I mentioned above that AOS has defaults built in. You can change these globally when you initiate AOS in your theme. Remember where that was? If you said theme.js you’re already at Einstein level!

Jump into that theme.js file and change it to look something like this:

AOS.init({   
delay: 0
duration: 1000
});

This would tell AOS animation on your site to always have a delay of 0 milliseconds and a duration of 1000 milliseconds. But if you specify a different value inline, it will override the global defaults.

5) Visit the AOS Github Page

Now that you have AOS working with WordPress, there are tons of animation values, theme.js parameters and other things you can do! To get the full scoop, visit the official page here:

https://github.com/michalsnik/aos

Have fun with your AOS animation for WordPress!

And a tip for ACF Pro users: I use ACF to place the values in drop downs from within WP-Admin. If you’re adding this to a site where you want to easily change AOS settings for items in a page or block template, simply add the value list for a parameter using an ACF dropdown.

Thanks for reading!

What is the Best Balance Bike? Woom 2 Bicycle Review

If you’re reading this and over the age of 40 (like me), you probably learned to ride a bike with training wheels. I still remember my dad taking me to the local fire station for that first non-training-wheel lesson.

So what’s wrong with training wheels? Quality time with dad & the fire station?

Nothing wrong with that.

But IMHO a balance bike sky rockets the learning experience. Your kid will learn to ride much faster, and that quality time you missed can be spent at the ice cream parlor instead. See where I’m going with this?

The Balance Bike Difference

To ride a bike, your kid has to learn to balance at some point. Am I right? Training wheels don’t teach this, they simply deliver a false sense of control. All they really do is delay the entire learning experience.

A balance bike has NO training wheels and NO pedals. Your child sits on the seat and runs with their feet. Balance bikes gradually introduce the concept of balance while you’re kiddo is having fun. It all happens naturally! No screams of terror, tears or pressure to make the switch.

Training wheels simply deliver a false sense of control, and delay the entire learning experience.

Our daughter is four years old. After probably less than five combined hours on her new balance bike, she was already saying things like, “Daddy look!” as she lifted both feet in the air. And once they start doing that, you simply move them to a bike with pedals. BOOM!

You’re probably like, “I clicked on your blog post to read about the best balance bike, not get lectured on the benefits.”

As the manager of the Cardinals said to Jerry Maguire: “I know, I know.”

Let’s get reviewing…

My daughter on her WOOM 2 bicycle.

WOOM Bicycle Review

When our daughter hit the age of four, I went on the hunt for the best balance bike. Began reading reviews and eventually took the plunge with WOOM.

A good decision. Woom is definitely the best balance bike IMHO.

Check this out: You’ll notice in the image above that my daughter’s WOOM 2 bike has no pedals, but it has the crank for them. Although it’s not called a balance bike, WOOM designed it to be either.

BOOYAH! Now I’m saving time and money — More ice cream!

After my daughter learns on her balance bike, I raise the seat a touch and screw on the pedals. It just doesn’t get easier.

Company Information

Christian Bezdeka and Marcus Ihlenfeld (out of Europe) started WOOM while Mathias Ihlenfeld (Marcus’ brother) runs the USA branch in Austin, TX. According to WOOM, it all started with a search for perfection. They wanted to know exactly what it took to build the ultimate children’s bike.

WOOM bikes are made overseas, but not in China, which made me happy. Their US branch inspects everything for quality control — Another cool detail.

The WOOM bikes are designed to be easily maintained.

Attention to Detail

Not only do WOOM balance bikes look beautiful, you get cool features typically only found in adult bikes. Quality seats with quick release. A smooth stem with no exposed screws. Pedals that screw on and off. Aluminum frames that make the bikes LIGHT (This makes for easy carrying when your kiddo’s ambition outdoes their stamina).

A very cool chain guard adds to the look and keeps the grease at bay.

Chain Guard

The chain guard is completely enclosed! Say goodbye to grease and grime, along with dirt and rust filled chains. This also keeps young fingers out of areas that might bring some tears. With this design (on the smaller bikes) there is a small amount of associated noise. I don’t mind it, as it’s minimal.

The steering limiter is a thoughtful addition that helps those new on wheels!

Steering Limiter

Things like the steering limiter just make sense on a balance bike. It’s designed to stabilize steering and prevent overturning and falls. You’ll see it in the image above, attached to the fork and the frame. Brilliant!

Smart hand brake system.

Smart Brake Design

Remember how cool it was to get handbrakes as a kid? I remember manually adding them to my pedal-braking dirt bike. They come standard on WOOM. Not only are they designed to fit very small hands, but WOOM colors the right one green to encourage safe braking vs your child launching themselves into cyber space. Bravo!

WOOM wheels just can’t be beat.

Super Cool Wheels

WOOM bikes have pro wheels in mini-size! They’re made with ultra light aluminum rims, aluminum hubs with sealed bearings and 16 stainless spokes. The WOOM 2 bike is required to ship with a pedal (coaster) brake setup – It’s federal law. But you can order their freewheel kit for only $19. They send you and ENTIRE new wheel that can be installed by any bike shop. This gives your kiddo the freedom to pedal backwards as they cruise!

The kickstand is an add-on item. Highly recommended!

Optional Kickstand

I can’t imagine not having the kickstand. Super easy to add to the bike. It’s made of lightweight aluminum and designed to be kid-friendly (spring loaded) and there’s no sharp edges.

Journey sporting her WOOM 2

Final Summary

For all of the features you get with WOOM, you also get a price tag. But here’s the thing: How long the bike lasts (and how it helps your kid) is where the value lies.

My parents didn’t have much money, but somehow they managed to buy me a little bike that was well built when I was young. Guess what? Not only did my brother and sister use that same bike after me, my sister’s kid has even used it! It’s still going strong. So when you do that kind of math, that was a very inexpensive bike.

Sure, you can go to Target and buy a $99 made-in-China bike that will rust next week, or you can eat out a little less and invest in something your kid and other kids will really, really love.

I hope this review proves helpful. You can read more about WOOM on their website: https://us.woombikes.com. As always, that’s not an affiliate link. I write about what I love.

Enjoy your next bike purchase!

Fun Fact: Our 4-year old daughter snapped the photo of me at the top. Not bad!

Do NOT follow this link or you will be banned from the site!