amp-fx-collection

Edit on Github
Open in Playground

Experimental Mode

This example uses the following experimental features: [amp-fx-fade-in,amp-fx-fade-in-scroll]. Enable the experiments via the button below. Some components require the AMP Dev Channel to be enabled as well. Learn more here.

Enable Dev Channel

Introduction

The amp-fx-collection extension provides a collection of preset visual effects, such as parallax that can be easily enabled on any element via amp-fx attribute.

Currently, only the parallax effect is supported. More effects such as fade-in, slide-in and more are planned to be supported soon. amp-fx-collection replaces the now-deprecated amp-fx-parallax component.

Setup

Import the amp-fx-collection extension in the header.

<script async custom-element="amp-fx-collection" src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js"></script>

Styles

The CSS used for these samples are included here for reference.

These rules are simply needed to make the samples work but are not fundamental to the concepts covered here.

<style amp-custom>
  .header {
    position: relative;
    overflow: hidden;
  }

  .header h1 {
    color: white;
    bottom: 10%;
    left: 10px;
    position: absolute;
    z-index: 1;
    font-size: 1.7em;
  }

  .title {
    background-color: black;
    color: white;
  }

  .parallax-image-window {
    overflow: hidden;
  }

  .parallax-image-window amp-img {
    margin-bottom: -30%;
  }
</style>

Parallax

The parallax effect allows an element to move as if it is nearer or farther relative to the foreground of the page content. As the user scrolls the page, the element scrolls faster or slower depending on the value assigned to the data-parallax-factor attribute.

Parallax effect can be added to any element by adding amp-fx="parallax" attribute and the intensity of the effect can be controlled via data-parallax-factor.

data-parallax-factor specifies a decimal value that controls how much faster or slower the element scrolls relative to the scrolling speed:

  • A value greater than 1 scrolls the element upward (element scrolls faster) when the user scrolls down the page.
  • A value less than 1 scrolls the element downward (element scrolls slower) when the user scrolls downward.

Example 1: Title parallax

Example

Lorem Ipsum

<div class="header">
  <h1 amp-fx="parallax"
    data-parallax-factor="1.3">
    <span class="title">Lorem Ipsum</span>
  </h1>
  <amp-img width="1600"
    height="900"
    layout="responsive"
    src="https://picsum.photos/1600/900?image=1069"></amp-img>
</div>

Example 2: Parallax image window

Example

<div class="parallax-image-window">
  <amp-img amp-fx="parallax"
    data-parallax-factor="1.1"
    width="1280"
    height="873"
    layout="responsive"
    src="/img/elephant.jpg"
    alt="Picture of an elephant"></amp-img>
</div>

Scroll triggered fade-in

The fade-in effect allows an element to fade in once the element being targetted is visible in the viewport.

Scroll triggered fade in effect can be added to any element by adding amp-fx="fade-in" attribute to an element. Currently, only a scroll triggered timed animation is supported. That is, once the element is within the viewport a timed animation will start that fades in the element. You can control the animation via the following attributes:

  • data-duration - This is the duration over which the animation takes places. The default value is 1000ms.
  • data-easing - This parameter lets you vary the animation's speed over the course of its duration. The default is ease-in which is cubic-bezier(0.40, 0.00, 0.40, 1.00). You can also choose from one of the presets available:
    • “linear” - cubic-bezier(0.00, 0.00, 1.00, 1.00),
    • “ease-in-out” - cubic-bezier(0.80, 0.00, 0.20, 1.00),
    • “ease-in” - cubic-bezier(0.80, 0.00, 0.60, 1.00),
    • “ease-out” - cubic-bezier(0.40, 0.00, 0.40, 1.00) (default),
    • or specify a custom-bezier() input.
  • data-margin-start - This parameter determines when to trigger the timed animation. The value specified in <percent> dictates that the animation should be triggered when the element is above the specified percentage of the viewport. The default value is 5%

Example 1: Animation with default attribute

Example

<amp-img amp-fx="fade-in"
  width="1600"
  height="900"
  layout="responsive"
  src="https://picsum.photos/1600/900?image=981"></amp-img>

Example 2: Slow animation

Example

<amp-img amp-fx="fade-in"
  data-duration="2000ms"
  width="1280"
  height="873"
  layout="responsive"
  src="/img/Border_Collie.jpg"
  alt="Picture of an elephant"></amp-img>

Example 3: Animation triggers when the element is past 50% of the viewport

Example

<amp-img amp-fx="fade-in"
  data-margin-start="50%"
  width="1280"
  height="873"
  layout="responsive"
  src="/img/windsor-castle_960x642.jpg"
  alt="Picture of a Windsor castle"></amp-img>

Example 4: Change the easing curve of the animation to a preset linear curve.

Example

<amp-img amp-fx="fade-in"
  data-easing="linear"
  width="1280"
  height="873"
  layout="responsive"
  src="/img/windsor-castle_960x642.jpg"
  alt="Picture of a Windsor castle"></amp-img>

Scroll dependent fade-in

The fade-in-scroll effect allows an element to fade in as the user scrolls in the viewport.

Scroll dependent fade in effect can be added to any element by adding amp-fx="fade-in-scroll" attribute to an element. You can control the animation via the following attributes:

  • data-margin-start - This parameter determines when to trigger the timed animation. The value specified in <percent> dictates that the animation should be triggered when the element is above the specified percentage of the viewport. The default value is 0%
  • data-margin-end - This parameter determines when to stop the timed animation. The value specified in <percent> dictates that the animation should be fully visible when the element crosses this threshold. The default value is 50%
  • data-repeat - By default once the element is fully visible the opacity of the element is locked in. If the developer wants to change the opacity even after it the element is fully visible please specify this attribute on the element.

Example 1: Animation with default attribute

Example

<amp-img amp-fx="fade-in-scroll"
  width="1600"
  height="900"
  layout="responsive"
  src="https://picsum.photos/1600/900?image=981"></amp-img>

Example 2: Animation triggers when the element is past 20% of the viewport and ends when it is past 80% of the viewport.

Example

<amp-img amp-fx="fade-in-scroll"
  data-margin-start="20%"
  data-margin-end="80%"
  width="1600"
  height="900"
  layout="responsive"
  src="/img/Border_Collie.jpg"></amp-img>

Example 3: Make the animation full dependent on the scroll action

Example

<amp-img amp-fx="fade-in-scroll"
  data-repeat
  width="1280"
  height="873"
  layout="responsive"
  src="/img/windsor-castle_960x642.jpg"
  alt="Picture of a Windsor castle"></amp-img>