Bold & Pop : 2019 Website Trends: Micro Animations and How to Do Them

If you haven’t noticed having an interactive element to your website has become increasingly more popular over the last few years. And we’re here to tell you this trend isn’t going anywhere anytime soon!

Luckily, you don’t have to go crazy when it comes to adding these interactive elements. Think banner slideshows, rotating testimonials, hover animations, and our new favorite… micro-scroll animations! This is where an element appears on your screen (slides in, floats up, bounces in, etc.) as you scroll through the site. Having an interactive element like this on your website keeps the user engaged and actually helps improve their user experience as well!

Keeps the User Engaged:

Our eyes are naturally drawn to movement meaning that elements appearing upon scrolling is more visually interesting than static text and images. This means your website visitor’s interest will be held longer as they continue to scroll further down your page.

Improves User Experience:

Along with keeping users’ engaged, scrolling animations can help direct your website visitors around your website. These animations can help draw attention to specific sections or key content on the page. It’s almost like giving your visitors a map of where they should go next while on your site, but in a fun and interactive way! For example, you may have static text and the animation piece is when a “Read More” button appears as users begin to scroll. Their scrolling indicates that they have finished reading and are now ready for the next action on the site (the “Read More” button). This helps provide them with easy navigation throughout the site and ultimately, a positive user experience.

So what do micro-scroll animations look like?

There are a lot of options out there but here are a few examples:

Fade In

Slide Up

tada



Cool! How do I add this to my site?

First thing you need to do is add the below code to your sitewide code injection. To find this, go to Settings > Advanced > Code Injection and then copy and paste this into the header code injection.

<!--Micrco-Scroll Animation Code Injection-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Next up, you need to add a code block to the page you’d like the animation on. (Pro tip: Make sure this block is below what you’re animating or it won’t work. We typically add it to the bottom of the page!)

Once you add the code block, copy and paste the below code into the block. You then need to change the spot where it says #block-name and className. Block name is the block ID so you can target that specific content block to animate. If you don’t know how to find this and you use Chrome for your browser, add this extension.

Then to change the className, you want to head over to this site. Here you can see the different types of animation options available. Once you choose, the className is literally just the name in the dropdown you chose (case sensitive!).

So you’ll simply add the #block-name and className to the code in the code block then hit save!

<!--Code Block-->

<script>
$('#block-name').addClass('wow className');
$('#block-name').addClass('wow className');
$('#block-name').addClass('wow className');
$('#block-name').addClass('wow className');
$('#block-name').addClass('wow className');
</script>


<!-- Duration -->
<script> $('#block-name').attr({'data-wow-duration':'1s','data-wow-delay':'0.4s'}); </script>


<!-- Init. script -->
<script>
       new WOW().init();
</script>

If you want to add more lines than the 5 provided (or you have less than 5), just add another (or delete the remaining):

$('#block-name').addClass('wow className');

at the end before </script>.

If you want to have the same animation for all, you can just add the #block-names all in the same section. For example, it would look like:

$('#block-name, #block-name, #block-name').addClass('wow className');

in that particular section of the code.

And last but not least, if you want to change the timing of your animations, go to the section that says <!-- Duration -->. You’ll add the #block-name again and then you can adjust 'data-wow-delay':'0.4s'. For example, it would look something like:

<script>
$('#block-name').attr({'data-wow-duration':'1s','data-wow-delay':'0.4s'});
$('#block-name').attr({'data-wow-duration':'1s','data-wow-delay':'0.5s'});
$('#block-name').attr({'data-wow-duration':'1s','data-wow-delay':'0.6s'});
</script>

This will change the timing of when your animations float onto the page (like the examples we provided above).

And there you have it! Simple animations to make a BIG impact on your Squarespace site!

If you add this to your site, we’d love to see! Drop a link to your site in the comments!

P.S. Exciting news! We launched a free #BoldBossTribe Facebook Group and would love for you to join us! Come on over!

Comment