Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Customizing Anchor Placement | Core AOS Features
HTML Scroll Animations with AOS

bookCustomizing Anchor Placement

When working with AOS, you can fine-tune exactly when an animation starts as you scroll by using the data-aos-anchor-placement attribute. This attribute determines which part of the animated element should align with which part of the viewport before the animation is triggered. By default, AOS triggers an animation when the top of the element reaches the bottom of the viewport, but you can change this behavior for more control.

The data-aos-anchor-placement attribute takes values in the format "element-part-viewport-part", where:

  • "element-part" can be one of: top, center, or bottom;
  • "viewport-part" can be one of: top, center, or bottom.

Here are some common anchor placement options and their effects:

  • "top-bottom": Animation triggers when the top of the element touches the bottom of the viewport;
  • "center-bottom": Animation triggers when the center of the element touches the bottom of the viewport;
  • "bottom-bottom": Animation triggers when the bottom of the element touches the bottom of the viewport;
  • "top-center": Animation triggers when the top of the element reaches the center of the viewport.

By adjusting this attribute, you can control the exact scroll position that starts the animation, allowing for more precise timing and a better user experience. This is especially useful if you want animations to occur earlier or later as the user scrolls through your page.

question mark

What does the data-aos-anchor-placement attribute control?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 5

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

bookCustomizing Anchor Placement

Sveip for å vise menyen

When working with AOS, you can fine-tune exactly when an animation starts as you scroll by using the data-aos-anchor-placement attribute. This attribute determines which part of the animated element should align with which part of the viewport before the animation is triggered. By default, AOS triggers an animation when the top of the element reaches the bottom of the viewport, but you can change this behavior for more control.

The data-aos-anchor-placement attribute takes values in the format "element-part-viewport-part", where:

  • "element-part" can be one of: top, center, or bottom;
  • "viewport-part" can be one of: top, center, or bottom.

Here are some common anchor placement options and their effects:

  • "top-bottom": Animation triggers when the top of the element touches the bottom of the viewport;
  • "center-bottom": Animation triggers when the center of the element touches the bottom of the viewport;
  • "bottom-bottom": Animation triggers when the bottom of the element touches the bottom of the viewport;
  • "top-center": Animation triggers when the top of the element reaches the center of the viewport.

By adjusting this attribute, you can control the exact scroll position that starts the animation, allowing for more precise timing and a better user experience. This is especially useful if you want animations to occur earlier or later as the user scrolls through your page.

question mark

What does the data-aos-anchor-placement attribute control?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 5
some-alt