Add animation__target class to elements or blocks you wish to be animated in (fade in), when they are in viewport.
<div class="section section--mt-large section--mb-large js-animation">
<div class="section__inner h-container">
<div class="grid">
<div class="grid__col grid__col--xs-4 grid__col--sm-12 grid__col--md-11 grid__col--offset-md-1">
<div class="section__title animation__target">
<h2>Section title</h2>
</div>
<div class="section__content ">
<div class="grid animation__grid grid--no-horizontal-gutter">
<div class="grid__col animation__target sg-animation-image-dummy grid__col--sm-3">
<figure class="image sg-animation-image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
<div class="grid__col animation__target sg-animation-image-dummy grid__col--sm-3">
<figure class="image sg-animation-image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
<div class="grid__col animation__target sg-animation-image-dummy grid__col--sm-3">
<figure class="image sg-animation-image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
<div class="grid__col animation__target sg-animation-image-dummy grid__col--sm-3">
<figure class="image sg-animation-image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
<div class="grid__col animation__target sg-animation-image-dummy grid__col--sm-3">
<figure class="image animation-image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
<div class="grid__col animation__target sg-animation-image-dummy grid__col--sm-3">
<figure class="image animation-image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
<div class="grid__col animation__target sg-animation-image-dummy grid__col--sm-3">
<figure class="image animation-image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
<div class="grid__col animation__target sg-animation-image-dummy grid__col--sm-3">
<figure class="image animation-image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
<div class="animation-empty-dummy"></div>
<div class="animation-quote-dummy animation__target">
<blockquote class="blockquote animation-quote">
<svg class="icon blockquote__icon animation__target">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#quote-24"></use>
</svg>
<div class="blockquote__content animation__target">
Sometimes I’ll start a sentence and I don’t even know where it’s going. I just hope I find it along the way.
</div>
<div class="blockquote__cite animation__target">
<figure class="image blockquote__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w, //via.placeholder.com/400x400 400w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
<cite class="blockquote__cite-creds">
<span class="blockquote__name">Name Lastname, Assistant To The Manager</span>
<span class="blockquote__creds text-small">Telia</span>
</cite>
</div>
</blockquote>
</div>
<div class="grid__col animation__target sg-animation-image-dummy grid__col--sm-3">
<figure class="image animation-image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
<div class="grid__col animation__target sg-animation-image-dummy grid__col--sm-3">
<figure class="image animation-image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
<div class="grid__col animation__target sg-animation-image-dummy grid__col--sm-3">
<figure class="image animation-image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
<div class="grid__col animation__target sg-animation-image-dummy grid__col--sm-3">
<figure class="image animation-image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
<div class="grid__col animation__target sg-animation-image-dummy grid__col--sm-3">
<figure class="image animation-image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
<div class="grid__col animation__target sg-animation-image-dummy grid__col--sm-3">
<figure class="image animation-image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
<div class="grid__col animation__target sg-animation-image-dummy grid__col--sm-3">
<figure class="image animation-image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
<div class="grid__col animation__target sg-animation-image-dummy grid__col--sm-3">
<figure class="image animation-image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% set topSpacing %}
{% apply spaceless %}
{% if 'small' in data.topSpacing %}
section--mt-small
{% elseif 'medium' in data.topSpacing %}
section--mt-medium
{% else %}
section--mt-large
{% endif %}
{% endapply %}
{% endset %}
{% set bottomSpacing %}
{% apply spaceless %}
{% if 'small' in data.bottomSpacing %}
section--mb-small
{% elseif 'medium' in data.bottomSpacing %}
section--mb-medium
{% else %}
section--mb-large
{% endif %}
{% endapply %}
{% endset %}
{% set content %}
<div class="grid animation__grid grid--no-horizontal-gutter">
{% for image in data.images %}
<div class="grid__col animation__target sg-animation-image-dummy grid__col--sm-3">
{% include '@image' with {class: 'sg-animation-image', modifier: '', data: data.image|srcset('389x505')} %}
</div>
{% endfor %}
{% for image in data.images %}
<div class="grid__col animation__target sg-animation-image-dummy grid__col--sm-3">
{% include '@image' with {class: 'animation-image', modifier: '', data: data.image|srcset('389x505')} %}
</div>
{% endfor %}
<div class="animation-empty-dummy"></div>
<div class="animation-quote-dummy animation__target">
{% include '@blockquote' with {class: 'animation-quote', modifier: '', data: data.quote} %}
</div>
{% for image in data.images %}
<div class="grid__col animation__target sg-animation-image-dummy grid__col--sm-3">
{% include '@image' with {class: 'animation-image', modifier: '', data: data.image|srcset('389x505')} %}
</div>
{% endfor %}
{% for image in data.images %}
<div class="grid__col animation__target sg-animation-image-dummy grid__col--sm-3">
{% include '@image' with {class: 'animation-image', modifier: '', data: data.image|srcset('389x505')} %}
</div>
{% endfor %}
</div>
{% endset %}
{% include '@section' with { class: 'js-animation', modifier: topSpacing ~ ' ' ~ bottomSpacing, data: { content: content, title: data.title, titleAnimate: true }, container: true} %}
{
"language": "en-US",
"data": {
"title": "Section title",
"images": [
{
"image": true
},
{
"image": true
},
{
"image": true
},
{
"image": true
}
],
"quote": {
"content": "Sometimes I’ll start a sentence and I don’t even know where it’s going. I just hope I find it along the way.",
"author": {
"image": true,
"name": "Name Lastname",
"position": "Assistant To The Manager",
"company": "Telia"
}
}
}
}
.is-animating {
animation: 1s cubic-bezier(.3,.86,.36,.95) 1 animationFadeIn forwards;
opacity: 1;
}
.animation__target {
body.has-animations & {
opacity: 0;
}
}
@keyframes animationFadeIn {
0% {
transform: translateY(1em);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
import Component from '../component/component';
import Helpers from '../helpers/helpers';
import './animation.scss';
interface IAnimationSettings {
animateClass?: string;
}
export default class Animation extends Component {
static initSelector: string = '.js-animation';
public targets: JQuery;
public listTargets: JQuery;
protected settings: IAnimationSettings;
private timeout: number;
private animationDelay: number;
constructor(element: HTMLElement) {
super(element);
if (window.gotoAndPlay.globalAnimationsEnabled) {
$('body').addClass('has-animations');
this.targets = this.element.find('.animation__target');
this.listTargets = this.element.find('.animation__list');
this.settings = {
animateClass: 'is-animating',
};
$(window).on('scroll', this.animateOnScroll.bind(this));
$(document).ready(this.animateSection.bind(this));
}
}
public animateSection(): void {
this.targets.each((index: number): void => {
const item: JQuery = $(this.targets[index]);
if (!item.hasClass('animation-started') && Helpers.isOnScreen(item, true)) {
item.addClass('animation-started');
window.setTimeout((): void => {
item.addClass(this.settings.animateClass);
}, this.animationDelay);
this.animationDelay += 160;
}
});
}
public animateOnScroll(): void {
if (this.timeout) {
window.clearTimeout(this.timeout);
}
this.timeout = window.setTimeout((): void => {
this.animationDelay = 0;
this.animateSection();
}, 10);
}
}