1 vote

AnimateOnScroll

Animate element on your page as you scroll.

Based on https://github.com/michalsnik/aos

Usage / Installation

Step 1, umbraco:

Create a datatype for Our.Umbraco.AnimateOnScroll

Add datatype as property name eg: "animate"

Step 2, template:

Add AOS css in <head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" />

Add script right before closing </body> tag, and initialize AOS:

<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>

<script>
  AOS.init();
</script>

Render html-attributes on element:

<section @(Model.Value<Our.Umbraco.AnimateOnScroll.Models.Animation>("animate").ToHtml())>Animated section</<section>

Download package
version 3.1.1

NuGet install instructions for Umbraco 8.5.0-9+

Install-Package Our.Umbraco.AnimateOnScroll

NuGet install instructions for Umbraco 9+

dotnet add package Our.Umbraco.AnimateOnScroll

Dennis has 177 karma points

c-trib

This package is compatible with the following versions as reported by community members who have downloaded this package:

Untested or doesn't work on Umbraco Cloud

Version 8.18.x (untested)

You must login before you can report on package compatibility.

Previously reported to work on versions: