How do I build animations?

Questions
1

I understand at the moment you need to build your own animations - this isn’t a problem because I’m proficient in JS, but I’m having some trouble getting my animations to actually work.

Keeping in mind that I can write my own code, can you explain to me how I build my own animations?

2

I wanted to answer, but am not sure if I understood the question.

Usually when certain aspect of your code does not work, you can go to dev tools on staging version of the site & see which part of your code is faulty (but you already know this).

If the question is: Where can I input my code in divhunt, you can take a look at this following thread:

If that doesn’t help, could you elaborate on that question?

3

Hi, in order to get animations now on a Divhunt website, you will need to use some library or to write your own. I will give you step by step tutorial how to do it when you import library. In this example I will show you how to do it with “AOS” library for animations.

AOS library is working through attributes, and theres much possibilities, like a lot of different type of animations, offsets, delays and some more options.

Click here to read documentation of AOS.

Step 1: Import AOS in HEAD START of your project

You can find CDN links of AOS in the link above, but I will leave it here anyway. But keep in mind, maybe in time you are reading this, CDN files might be updated with newer version with more possibilities by AOS.

Copy CDNs below

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

Paste it in custom code

Go to admin panel of your project, go to custom code and paste code above to HEAD START.

image
image976×333 16.5 KB

Step 2: Initialize AOS

Create a JS file in builder of your project, and set event of file to “onPageReady”.
If you need help with creating your file, you can learn it in Step 3 of this post.

Add code from below in your JS file.

AOS.init();

image
image792×229 8.51 KB

Add attributes to tags you want to animate

Select a tag you want to animate, go to attributes, and add attributes,
you will find all avilable attributes that you can use in AOS Docs.

But for starters you will probably need only attributes data-aos and data-aos-delay.

After you add attributes to your tag like in example (screenshot) below, you are all set.

image
image1235×702 139 KB

1 Like
4

Thanks for showing this methodology. Will explore this more in depth

5

Do you plan to create a plugin natively and add it to Divhunt soon Stefan?

@Pakic

6

This one already exists. Now you can achieve all of this with simple scroll animations plugin