If you want to take your portfolio website to the next level, then you can add animation to it. Most clients make judgments after seeing the design of your site. And the animation enhances the design experience of your website.
However, we should not animate the web pages randomly and make them crazy with lots of unwanted animation that is against the user experience.
So the animation should be minimal, professional, user-friendly & meaningful. If this is what you’re agreeing with then let’s get started.
Before we deep dive, see the animated portfolio template that you’re going to build.
See the finished productProject setup
In this project, I will use an existing template that is also built by me. This will save time for both of us.
If you want to follow along with me (from start to finish), then check another post and grab the static portfolio template (without animation).
Alright! Assuming you have an existing template and you’re ready to add animation to it.
Animation library
There are a couple of options that you can use to add animation to your portfolio. Such as Animate.CSS, anime js, etc. But in this project, I will use AOS (animate on scroll).
This is because it’s just not only easy to use but it is also perfect for our purpose. Since we will have different blocks (portfolio items), so we need to animate them upon scroll and different timing. And that’s it for the sake of argument.
Adding/installing AOS (animate on scroll) library to your portfolio template
Step-1: Open your HTML file (index.html) and add the following CSS within the <head> tag:
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />Step-2: Now copy & paste the following code before the closing </body> tag:
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>You’re all set. Let’s start animating your portfolio.
How to animate the portfolio blocks and HTML elements
In the above section, you already installed the AOS library to your project. Now you only need to set animation using “data-aos” attribute to your HTML elements. Let me give you some examples so you will have a clear idea.
Example of animation
For my banner section, I have the following HTML code:
<section class="banner">
<div class="banner--content">
<h3 class="name">Your name</h3>
<h1 class="designation">Freelance graphic designer</h1>
<p class="tagline">If you're writer or something else, change the title as per your profession.</p>
</div>
</section><!-- .banner -->Instead of animating the whole banner, I decided to animate only the texts that were wrapped within the “.banner–content” <div> (CSS class). So I will add the “data-aos” attribute to this <div>. See the updated code below:
<section class="banner">
<div class="banner--content"
data-aos="fade-in"
data-aos-duration="1000"
>
<h3 class="name">Your name</h3>
<h1 class="designation">Freelance graphic designer</h1>
<p class="tagline">If you're writer or something else, change the title as per your profession.</p>
</div>
</section><!-- .banner -->The data-aos=”fade-in” adds a fade-in effect. See all the different animation effects below that you can use.
- Fade animations:
- fade
- fade-up
- fade-down
- fade-left
- fade-right
- fade-up-right
- fade-up-left
- fade-down-right
- fade-down-left
- Flip animations:
- flip-up
- flip-down
- flip-left
- flip-right
- Slide animations:
- slide-up
- slide-down
- slide-left
- slide-right
- Zoom animations:
- zoom-in
- zoom-in-up
- zoom-in-down
- zoom-in-left
- zoom-in-right
- zoom-out
- zoom-out-up
- zoom-out-down
- zoom-out-left
- zoom-out-right
Source: AOS Predefine option
You may have noticed that I also added another attribute data-aos-duration=”1000″ and it defines the timing of the animation. There are many other attributes and options for AOS but you will not need most of them. Therefore feel free to check Michał’s GitHub repository.
You can download the source code and see how I added different animations to the portfolio template.
Download source codeThis is a one-page portfolio website. Do you want to convert it into multiple pages? See how you can create a multiple-page website only using HTML & CSS.
Build HTML CSS projects
Conclusion
You saw how I added animation to the portfolio website. Also, I explained how you can change and add different types of animations. You can always download my template from the above link, compare it with yours or even you can make some edits to my template and use it for your own portfolio.
