Skip to content
AF | Animation Framework

Scroll-triggered animations

Scroll-triggered animations allow you to animate elements based on scroll position / their presence in viewport. AF supports all ScrollTrigger parameters that GSAP has.

How it works

af-scroll attribute is used to specify the parameters of ScrollTrigger. There are 2 options — don’t specify any parameters:

<div af-scroll af-from="x: 100" af-to="x: 0"></div>

which will toggle specified animation on scroll, with the following defaults: trigger - current element, start: 'top 90%', end: 'bottom 10%', toggleActions: 'play reverse play reverse', scrub: false

…or, you can specify any number of parameters (those won’t be merged with the defaults):

<div af-scroll="start: 'top 90%', end: 'bottom 10%', trigger: .box1, endTrigger: .box2, scrub: true"></div>

Timelines and ScrollTrigger

GSAP animation states that adding scroll triggers inside timeline elements can get messy, so AF does the following — if your timeline has more than one animation, it takes the very first af-scroll attribute and creates a ScrollTrigger with those parameters on the timeline level. So if you have af-scroll on more than one animation, those will be dismissed. If there’s no timeline, or timeline only has one animation, ScrollTrigger will still be created on the timeline level.

ScrollTriggers without animation

Currently, ScrollTriggers are created only to trigger animations — though, adding support to use them witout animations is on the roadmap. E.g. you can’t reproduce this for now:

ScrollTrigger.create({
  trigger: "#element",
  start: "top top",
  end: "bottom 150px",
  pin: "#element-content"
});

So at the moment, to make sure your ScrollTrigger works, element should have any animation attached to it - af-from, af-to, af-keyframes, etc. Single af-scroll without anything else won’t do anything.

Examples


Scroll-triggered animations
First animation triggers when you scroll into view. Second animation is scrubbed when you scroll into view.