Animations On Scroll in Carrd

& How to implement them?

! Carrd’s Pro Plus plan required (referral link) to be able to implement AOS into your Carrd site.

• Add 2 new Embed elements. It doesn’t matter where you place them. Though, my suggestion is to put them inside the very bottom container, so it doesn’t interfere with your editing later on.

• In the first Embed element, set the Type to Code, Style (from Inline) to Hidden — Head and inside Code field paste this:

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

• In the second Embed element, set the Type to Code, Style (from Inline) to Hidden — Body End, and inside Code field paste this:

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

Let’s animate now!

Good news! With AOS you can animate not only an entire container, but also a one specific element alone. This means that an element can perform a completely different action than a container it’s in.

• Each container & element has a Settings tab. Each Settings tab has an Element tab, and each Element tab has THE Attributes field (see below).

Settings > Element > Attributes

In the Attributes field you can set a type of an animation, as well as adjust the behaviour of that animation.

Example:

data-aos=fade-right
data-aos-easing=ease-in-out
data-aos-duration=1300
data-aos-offset=200
data-aos-once=true

Most of them are pretty self explanatory, but if you want to understand them in more depth, as well as understand the types of animations you can use in your project, learn more by clicking here.

Once you’ve pasted all the desired attributes, publish the project and refresh the page to see the set animation:

Article sponsored by me 😅:

Consider checking out my Carrd templates at worrk.co

Credits

The creator of AOS Library — Michał Sajnóg

If you’d have any Carrd related question(s), send me a DM
@1foehn on Twitter