<section class="supt-section-highlights">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-sm-10 col-md-8 col-lg-6">
<h2 class="supt-section-highlights__title supt-slide-up-title">
Verisure hardware is designed to deliver the best security, operational quality and efficiency
</h2>
</div>
<div class="col-12">
<div class="supt-section-highlights__products">
<div class="supt-section-highlights__products__inner">
<div class="supt-section-highlights__product">
<div class="supt-section-highlights__product__main">
<div class="supt-section-highlights__product__content">
<h3 class="supt-section-highlights__product__title">Verisure VoicePad</h3>
<p class="supt-section-highlights__product__description">Talk to us directly and get the help you need.</p>
</div>
<div class="supt-section-highlights__product__image-wrapper">
<img src="/sites/gv/files/flmngr/superhuit/innovation/highlights/voicepad/voicepad.webp" alt="Verisure VoicePad" class="supt-section-highlights__product__image">
</div>
</div>
<div class="supt-section-highlights__product__feature -image">
<div class="supt-section-highlights__product__content">
<h4 class="supt-section-highlights__product__feature__title">Built in speaker for dual communication</h4>
</div>
<div class="supt-section-highlights__product__feature__image-wrapper">
<img src="/sites/gv/files/flmngr/superhuit/innovation/highlights/voicepad/speaker.webp" alt="Integrated speaker" class="supt-section-highlights__product__feature__image">
</div>
</div>
<div class="supt-section-highlights__product__feature -icon">
<div class="supt-section-highlights__product__content">
<span class="supt-section-highlights__product__feature__icon">
<span class="supt-section-highlights__product__feature__icon__inner">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 175.75 175.75">
<g id="ICON_GREY___RED" data-name="ICON_GREY_&_RED">
<g>
<path fill="#f03" d="M134.31,51.58c-.14-1.84-1.64-3.26-3.47-3.03-12.82,1.6-27.36,2.68-43.32,2.66-13.51-.02-34.66-1.96-42.81-2.76-1.8-.18-3.28,1.23-3.39,3.04-.29,4.96-.17,10.12.26,14.97.18,1.98,4.14,48.96,44.47,82.47l1.76,1.47,1.77-1.47c40.38-33.5,44.19-80.44,44.47-82.47.64-4.6.64-9.76.26-14.88" />
<path fill="#fff" d="M95.43,83.36c-2.24,0-4.06,1.83-4.06,4.08s1.82,4.08,4.06,4.08,4.06-1.83,4.06-4.08-1.82-4.08-4.06-4.08" />
<path fill="#fff" d="M98.84,87.44c0,6.07-4.92,11.01-10.97,11.01s-10.97-4.94-10.97-11.01,4.92-11.01,10.97-11.01c3.63,0,6.84,1.78,8.84,4.51l11.52-3.25c-3.63-7.62-11.38-12.88-20.35-12.88-12.46,0-22.55,10.13-22.55,22.63,0,21.74,22.55,37.71,22.55,37.71,0,0,22.55-15.97,22.55-37.71h-11.58Z" />
</g>
</g>
</svg>
</span>
</span>
<h4 class="supt-section-highlights__product__feature__title">Hands free disarm</h4>
<span class="supt-button__wrapper">
<span class="supt-button__inner">
<span class="supt-button__title -clone" aria-hidden="true">
Verisure hardware is designed to deliver the best security, operational quality and efficiency
</span>
<span class="supt-button__mask">
<span class="supt-button__mask__inner"></span>
</span>
</span>
</span>
</div>
</div>
<div class="supt-section-highlights__product__feature -icon">
<div class="supt-section-highlights__product__content">
<span class="supt-section-highlights__product__feature__icon">
<span class="supt-section-highlights__product__feature__icon__inner">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 175.75 175.75">
<g id="ICON_GREY___RED" data-name="ICON_GREY_&_RED">
<g>
<path fill="#f03" d="M134.31,51.58c-.14-1.84-1.64-3.26-3.47-3.03-12.82,1.6-27.36,2.68-43.32,2.66-13.51-.02-34.66-1.96-42.81-2.76-1.8-.18-3.28,1.23-3.39,3.04-.29,4.96-.17,10.12.26,14.97.18,1.98,4.14,48.96,44.47,82.47l1.76,1.47,1.77-1.47c40.38-33.5,44.19-80.44,44.47-82.47.64-4.6.64-9.76.26-14.88" />
<path fill="#fff" d="M95.43,83.36c-2.24,0-4.06,1.83-4.06,4.08s1.82,4.08,4.06,4.08,4.06-1.83,4.06-4.08-1.82-4.08-4.06-4.08" />
<path fill="#fff" d="M98.84,87.44c0,6.07-4.92,11.01-10.97,11.01s-10.97-4.94-10.97-11.01,4.92-11.01,10.97-11.01c3.63,0,6.84,1.78,8.84,4.51l11.52-3.25c-3.63-7.62-11.38-12.88-20.35-12.88-12.46,0-22.55,10.13-22.55,22.63,0,21.74,22.55,37.71,22.55,37.71,0,0,22.55-15.97,22.55-37.71h-11.58Z" />
</g>
</g>
</svg>
</span>
</span>
<h4 class="supt-section-highlights__product__feature__title">Full alarm control</h4>
<span class="supt-button__wrapper">
<span class="supt-button__inner">
<span class="supt-button__title -clone" aria-hidden="true">
Verisure hardware is designed to deliver the best security, operational quality and efficiency
</span>
<span class="supt-button__mask">
<span class="supt-button__mask__inner"></span>
</span>
</span>
</span>
</div>
</div>
<div class="supt-section-highlights__product__feature -image">
<div class="supt-section-highlights__product__content">
<h4 class="supt-section-highlights__product__feature__title">SOS button</h4>
</div>
<div class="supt-section-highlights__product__feature__image-wrapper">
<img src="/sites/gv/files/flmngr/superhuit/innovation/highlights/voicepad/sos-button.jpg" alt="SOS button" class="supt-section-highlights__product__feature__image">
</div>
</div>
</div>
<div class="supt-section-highlights__product">
<div class="supt-section-highlights__product__main">
<div class="supt-section-highlights__product__content">
<h3 class="supt-section-highlights__product__title">GuardVision™ Outdoor camera detector</h3>
<p class="supt-section-highlights__product__description">We keep you safe by seeing the details that matter.</p>
</div>
<div class="supt-section-highlights__product__image-wrapper">
<img src="/sites/gv/files/flmngr/superhuit/innovation/highlights/guardvision/guardvision.webp" alt="GuardVision™" class="supt-section-highlights__product__image">
</div>
</div>
<div class="supt-section-highlights__product__feature -image">
<div class="supt-section-highlights__product__content">
<h4 class="supt-section-highlights__product__feature__title">Built-in microphone and speaker to deter intruders</h4>
</div>
<div class="supt-section-highlights__product__feature__image-wrapper">
<img src="/sites/gv/files/flmngr/superhuit/innovation/highlights/guardvision/speaker.jpg" alt="Speaker" class="supt-section-highlights__product__feature__image">
</div>
</div>
<div class="supt-section-highlights__product__feature -icon">
<div class="supt-section-highlights__product__content">
<span class="supt-section-highlights__product__feature__icon">
<span class="supt-section-highlights__product__feature__icon__inner">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 175.75 175.75">
<g id="ICON_GREY___RED" data-name="ICON_GREY_&_RED">
<g>
<path fill="#f03" d="M134.31,51.58c-.14-1.84-1.64-3.26-3.47-3.03-12.82,1.6-27.36,2.68-43.32,2.66-13.51-.02-34.66-1.96-42.81-2.76-1.8-.18-3.28,1.23-3.39,3.04-.29,4.96-.17,10.12.26,14.97.18,1.98,4.14,48.96,44.47,82.47l1.76,1.47,1.77-1.47c40.38-33.5,44.19-80.44,44.47-82.47.64-4.6.64-9.76.26-14.88" />
<path fill="#fff" d="M95.43,83.36c-2.24,0-4.06,1.83-4.06,4.08s1.82,4.08,4.06,4.08,4.06-1.83,4.06-4.08-1.82-4.08-4.06-4.08" />
<path fill="#fff" d="M98.84,87.44c0,6.07-4.92,11.01-10.97,11.01s-10.97-4.94-10.97-11.01,4.92-11.01,10.97-11.01c3.63,0,6.84,1.78,8.84,4.51l11.52-3.25c-3.63-7.62-11.38-12.88-20.35-12.88-12.46,0-22.55,10.13-22.55,22.63,0,21.74,22.55,37.71,22.55,37.71,0,0,22.55-15.97,22.55-37.71h-11.58Z" />
</g>
</g>
</svg>
</span>
</span>
<h4 class="supt-section-highlights__product__feature__title">Built in artificial intelligence</h4>
<span class="supt-button__wrapper">
<span class="supt-button__inner">
<span class="supt-button__title -clone" aria-hidden="true">
Verisure hardware is designed to deliver the best security, operational quality and efficiency
</span>
<span class="supt-button__mask">
<span class="supt-button__mask__inner"></span>
</span>
</span>
</span>
</div>
</div>
<div class="supt-section-highlights__product__feature -icon">
<div class="supt-section-highlights__product__content">
<span class="supt-section-highlights__product__feature__icon">
<span class="supt-section-highlights__product__feature__icon__inner">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 175.75 175.75">
<g id="ICON_GREY___RED" data-name="ICON_GREY_&_RED">
<g>
<path fill="#f03" d="M134.31,51.58c-.14-1.84-1.64-3.26-3.47-3.03-12.82,1.6-27.36,2.68-43.32,2.66-13.51-.02-34.66-1.96-42.81-2.76-1.8-.18-3.28,1.23-3.39,3.04-.29,4.96-.17,10.12.26,14.97.18,1.98,4.14,48.96,44.47,82.47l1.76,1.47,1.77-1.47c40.38-33.5,44.19-80.44,44.47-82.47.64-4.6.64-9.76.26-14.88" />
<path fill="#fff" d="M95.43,83.36c-2.24,0-4.06,1.83-4.06,4.08s1.82,4.08,4.06,4.08,4.06-1.83,4.06-4.08-1.82-4.08-4.06-4.08" />
<path fill="#fff" d="M98.84,87.44c0,6.07-4.92,11.01-10.97,11.01s-10.97-4.94-10.97-11.01,4.92-11.01,10.97-11.01c3.63,0,6.84,1.78,8.84,4.51l11.52-3.25c-3.63-7.62-11.38-12.88-20.35-12.88-12.46,0-22.55,10.13-22.55,22.63,0,21.74,22.55,37.71,22.55,37.71,0,0,22.55-15.97,22.55-37.71h-11.58Z" />
</g>
</g>
</svg>
</span>
</span>
<h4 class="supt-section-highlights__product__feature__title">Night vision</h4>
<span class="supt-button__wrapper">
<span class="supt-button__inner">
<span class="supt-button__title -clone" aria-hidden="true">
Verisure hardware is designed to deliver the best security, operational quality and efficiency
</span>
<span class="supt-button__mask">
<span class="supt-button__mask__inner"></span>
</span>
</span>
</span>
</div>
</div>
<div class="supt-section-highlights__product__feature -image">
<div class="supt-section-highlights__product__content">
<h4 class="supt-section-highlights__product__feature__title">HD camera</h4>
</div>
<div class="supt-section-highlights__product__feature__image-wrapper">
<img src="/sites/gv/files/flmngr/superhuit/innovation/highlights/guardvision/hd-camera.jpg" alt="HD camera" class="supt-section-highlights__product__feature__image">
</div>
</div>
</div>
<div class="supt-section-highlights__product">
<div class="supt-section-highlights__product__main">
<div class="supt-section-highlights__product__content">
<h3 class="supt-section-highlights__product__title">Verisure Shock Sensor</h3>
<p class="supt-section-highlights__product__description">Protecting your home by monitoring your doors and windows.</p>
</div>
<div class="supt-section-highlights__product__image-wrapper">
<img src="/sites/gv/files/flmngr/superhuit/innovation/highlights/shock-sensor/shock-sensor.webp" alt="Shock Sensor" class="supt-section-highlights__product__image">
</div>
</div>
<div class="supt-section-highlights__product__feature -image">
<div class="supt-section-highlights__product__content">
<h4 class="supt-section-highlights__product__feature__title">Detects force and repetition with built-in accelerometer</h4>
</div>
<div class="supt-section-highlights__product__feature__image-wrapper">
<img src="/sites/gv/files/flmngr/superhuit/innovation/highlights/shock-sensor/accelerometer.webp" alt="Accelerometer" class="supt-section-highlights__product__feature__image">
</div>
</div>
<div class="supt-section-highlights__product__feature -icon">
<div class="supt-section-highlights__product__content">
<span class="supt-section-highlights__product__feature__icon">
<span class="supt-section-highlights__product__feature__icon__inner">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 175.75 175.75">
<g id="ICON_GREY___RED" data-name="ICON_GREY_&_RED">
<g>
<path fill="#f03" d="M134.31,51.58c-.14-1.84-1.64-3.26-3.47-3.03-12.82,1.6-27.36,2.68-43.32,2.66-13.51-.02-34.66-1.96-42.81-2.76-1.8-.18-3.28,1.23-3.39,3.04-.29,4.96-.17,10.12.26,14.97.18,1.98,4.14,48.96,44.47,82.47l1.76,1.47,1.77-1.47c40.38-33.5,44.19-80.44,44.47-82.47.64-4.6.64-9.76.26-14.88" />
<path fill="#fff" d="M95.43,83.36c-2.24,0-4.06,1.83-4.06,4.08s1.82,4.08,4.06,4.08,4.06-1.83,4.06-4.08-1.82-4.08-4.06-4.08" />
<path fill="#fff" d="M98.84,87.44c0,6.07-4.92,11.01-10.97,11.01s-10.97-4.94-10.97-11.01,4.92-11.01,10.97-11.01c3.63,0,6.84,1.78,8.84,4.51l11.52-3.25c-3.63-7.62-11.38-12.88-20.35-12.88-12.46,0-22.55,10.13-22.55,22.63,0,21.74,22.55,37.71,22.55,37.71,0,0,22.55-15.97,22.55-37.71h-11.58Z" />
</g>
</g>
</svg>
</span>
</span>
<h4 class="supt-section-highlights__product__feature__title">Early break-in attempt detection</h4>
<span class="supt-button__wrapper">
<span class="supt-button__inner">
<span class="supt-button__title -clone" aria-hidden="true">
Verisure hardware is designed to deliver the best security, operational quality and efficiency
</span>
<span class="supt-button__mask">
<span class="supt-button__mask__inner"></span>
</span>
</span>
</span>
</div>
</div>
<div class="supt-section-highlights__product__feature -icon">
<div class="supt-section-highlights__product__content">
<span class="supt-section-highlights__product__feature__icon">
<span class="supt-section-highlights__product__feature__icon__inner">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 175.75 175.75">
<g id="ICON_GREY___RED" data-name="ICON_GREY_&_RED">
<g>
<path fill="#f03" d="M134.31,51.58c-.14-1.84-1.64-3.26-3.47-3.03-12.82,1.6-27.36,2.68-43.32,2.66-13.51-.02-34.66-1.96-42.81-2.76-1.8-.18-3.28,1.23-3.39,3.04-.29,4.96-.17,10.12.26,14.97.18,1.98,4.14,48.96,44.47,82.47l1.76,1.47,1.77-1.47c40.38-33.5,44.19-80.44,44.47-82.47.64-4.6.64-9.76.26-14.88" />
<path fill="#fff" d="M95.43,83.36c-2.24,0-4.06,1.83-4.06,4.08s1.82,4.08,4.06,4.08,4.06-1.83,4.06-4.08-1.82-4.08-4.06-4.08" />
<path fill="#fff" d="M98.84,87.44c0,6.07-4.92,11.01-10.97,11.01s-10.97-4.94-10.97-11.01,4.92-11.01,10.97-11.01c3.63,0,6.84,1.78,8.84,4.51l11.52-3.25c-3.63-7.62-11.38-12.88-20.35-12.88-12.46,0-22.55,10.13-22.55,22.63,0,21.74,22.55,37.71,22.55,37.71,0,0,22.55-15.97,22.55-37.71h-11.58Z" />
</g>
</g>
</svg>
</span>
</span>
<h4 class="supt-section-highlights__product__feature__title">Designed to blend in</h4>
<span class="supt-button__wrapper">
<span class="supt-button__inner">
<span class="supt-button__title -clone" aria-hidden="true">
Verisure hardware is designed to deliver the best security, operational quality and efficiency
</span>
<span class="supt-button__mask">
<span class="supt-button__mask__inner"></span>
</span>
</span>
</span>
</div>
</div>
<div class="supt-section-highlights__product__feature -image">
<div class="supt-section-highlights__product__content">
<h4 class="supt-section-highlights__product__feature__title">Can be monitored through the Verisure app</h4>
</div>
<div class="supt-section-highlights__product__feature__image-wrapper">
<img src="/sites/gv/files/flmngr/superhuit/innovation/highlights/shock-sensor/verisure-app.webp" alt="Verisure app" class="supt-section-highlights__product__feature__image">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
No notes defined.
<section class="supt-section-highlights">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-sm-10 col-md-8 col-lg-6">
<h2 class="supt-section-highlights__title supt-slide-up-title">
{{ title }}
</h2>
</div>
<div class="col-12">
<div class="supt-section-highlights__products">
<div class="supt-section-highlights__products__inner">
{% for product in products %}
<div class="supt-section-highlights__product">
<div class="supt-section-highlights__product__main">
<div class="supt-section-highlights__product__content">
<h3 class="supt-section-highlights__product__title">{{ product.title }}</h3>
<p class="supt-section-highlights__product__description">{{ product.description }}</p>
</div>
<div class="supt-section-highlights__product__image-wrapper">
<img src="{{ product.image.src }}" alt="{{ product.image.alt }}" class="supt-section-highlights__product__image">
</div>
</div>
{% for feature in product.features %}
<div class="supt-section-highlights__product__feature {{ feature.image ? '-image' : '-icon' }}">
<div class="supt-section-highlights__product__content">
{% if feature.icon %}
<span class="supt-section-highlights__product__feature__icon">
<span class="supt-section-highlights__product__feature__icon__inner">
{% include "02-icons/"~ feature.icon ~"-icon.twig" %}
</span>
</span>
{% endif %}
<h4 class="supt-section-highlights__product__feature__title">{{ feature.title }}</h4>
{% if not feature.image %}
<span class="supt-button__wrapper">
<span class="supt-button__inner">
<span class="supt-button__title -clone" aria-hidden="true">
{{ title }}
</span>
<span class="supt-button__mask">
<span class="supt-button__mask__inner"></span>
</span>
</span>
</span>
{% endif %}
</div>
{% if feature.image %}
<div class="supt-section-highlights__product__feature__image-wrapper">
<img src="{{ feature.image.src }}" alt="{{ feature.image.alt }}" class="supt-section-highlights__product__feature__image">
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</section>
{
"title": "Verisure hardware is designed to deliver the best security, operational quality and efficiency",
"products": [
{
"title": "Verisure VoicePad",
"description": "Talk to us directly and get the help you need.",
"image": {
"src": "/sites/gv/files/flmngr/superhuit/innovation/highlights/voicepad/voicepad.webp",
"alt": "Verisure VoicePad"
},
"features": [
{
"title": "Built in speaker for dual communication",
"image": {
"src": "/sites/gv/files/flmngr/superhuit/innovation/highlights/voicepad/speaker.webp",
"alt": "Integrated speaker"
}
},
{
"title": "Hands free disarm",
"icon": "verisure-guardian"
},
{
"title": "Full alarm control",
"icon": "verisure-guardian"
},
{
"title": "SOS button",
"image": {
"src": "/sites/gv/files/flmngr/superhuit/innovation/highlights/voicepad/sos-button.jpg",
"alt": "SOS button"
}
}
]
},
{
"title": "GuardVision™ Outdoor camera detector",
"description": "We keep you safe by seeing the details that matter.",
"image": {
"src": "/sites/gv/files/flmngr/superhuit/innovation/highlights/guardvision/guardvision.webp",
"alt": "GuardVision™"
},
"features": [
{
"title": "Built-in microphone and speaker to deter intruders",
"image": {
"src": "/sites/gv/files/flmngr/superhuit/innovation/highlights/guardvision/speaker.jpg",
"alt": "Speaker"
}
},
{
"title": "Built in artificial intelligence",
"icon": "verisure-guardian"
},
{
"title": "Night vision",
"icon": "verisure-guardian"
},
{
"title": "HD camera",
"image": {
"src": "/sites/gv/files/flmngr/superhuit/innovation/highlights/guardvision/hd-camera.jpg",
"alt": "HD camera"
}
}
]
},
{
"title": "Verisure Shock Sensor",
"description": "Protecting your home by monitoring your doors and windows.",
"image": {
"src": "/sites/gv/files/flmngr/superhuit/innovation/highlights/shock-sensor/shock-sensor.webp",
"alt": "Shock Sensor"
},
"features": [
{
"title": "Detects force and repetition with built-in accelerometer",
"image": {
"src": "/sites/gv/files/flmngr/superhuit/innovation/highlights/shock-sensor/accelerometer.webp",
"alt": "Accelerometer"
}
},
{
"title": "Early break-in attempt detection",
"icon": "verisure-guardian"
},
{
"title": "Designed to blend in",
"icon": "verisure-guardian"
},
{
"title": "Can be monitored through the Verisure app",
"image": {
"src": "/sites/gv/files/flmngr/superhuit/innovation/highlights/shock-sensor/verisure-app.webp",
"alt": "Verisure app"
}
}
]
}
]
}
import { Sizes } from '@/js/Sizes';
import { animate, onScroll, stagger } from 'animejs';
export class SectionHighlights {
private $element: HTMLElement;
private $productsWrapper: HTMLElement;
private $productsInner: HTMLElement;
products: Product[];
sizes: Sizes;
hasInitializedDesktop: boolean = false;
delta: number = 0;
constructor($element: HTMLElement) {
this.$element = $element;
this.$productsWrapper = this.$element.querySelector(
'.supt-section-highlights__products'
) as HTMLElement;
this.$productsInner = this.$element.querySelector(
'.supt-section-highlights__products__inner'
) as HTMLElement;
const $products = this.$element.querySelectorAll('.supt-section-highlights__product');
this.products = Array.from($products).map($product => new Product($product as HTMLElement));
this.sizes = new Sizes();
this.handleProductsWrapperPosition();
this.handleScrollAnimation();
window.addEventListener('resize', this.handleResize.bind(this));
}
/**
* Handle products wrapper position on desktop in order to remove the gap between the products and the title
*/
handleProductsWrapperPosition(): void {
if (this.sizes.isDesktop) {
const productsHeight = this.products[0].$element.offsetHeight;
this.delta = (window.innerHeight - productsHeight) / 2;
this.$productsWrapper.style.marginTop = `${-1 * this.delta}px`;
}
}
handleScrollAnimation(): void {
const windowHeight = window.innerHeight - this.delta;
if (this.sizes.isDesktop) {
this.hasInitializedDesktop = true;
/**
* Toogle products visibility on scroll
*/
// 1st product
onScroll({
container: document.body,
target: this.$element,
enter: 'bottom top',
leave: `top top+=${windowHeight}px`,
onEnter: () => {
// Display 1st product
this.products[0].display();
},
onLeave: () => {
// Hide 1st product
this.products[0].hide();
},
});
// 2nd product
onScroll({
container: document.body,
target: this.$element,
enter: `top top+=${windowHeight}px`,
leave: `top top+=${2 * windowHeight}px`,
onEnter: () => {
// Display 2nd product
this.products[1].display();
},
onLeave: () => {
// Hide 2nd product
this.products[1].hide();
},
});
// 3rd product
onScroll({
container: document.body,
target: this.$element,
enter: `top top+=${2 * windowHeight}px`,
leave: 'top bottom+=100vh',
onEnter: () => {
// Display 3rd product
this.products[2].display();
},
onLeave: () => {
// Hide 3rd product
this.products[2].hide();
},
});
/**
* Animate (zoom/parallax) products images on scroll
*/
// Parallax on image on scroll
animate(this.products[0].$imageWrappers, {
scale: [1.2, 1],
y: ['-10%', '0%'],
ease: 'linear',
autoplay: onScroll({
container: document.body,
target: this.$productsInner,
enter: 'bottom top',
leave: 'bottom bottom',
sync: true,
}),
});
animate(this.products[2].$imageWrappers, {
scale: [1, 1.1],
y: ['0%', '10%'],
ease: 'linear',
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: 'bottom bottom',
leave: 'top bottom',
sync: true,
}),
});
} else {
this.products.forEach(product => {
animate(product.$imageWrappers, {
scale: [1.3, 1],
y: ['-10%', '0%'],
ease: 'linear',
autoplay: onScroll({
container: document.body,
target: product.$element,
enter: 'bottom top',
leave: 'bottom bottom',
sync: true,
}),
});
});
}
}
handleResize(): void {
this.handleProductsWrapperPosition();
if (this.sizes.isDesktop && !this.hasInitializedDesktop) {
this.handleScrollAnimation();
}
}
}
class Product {
$element: HTMLElement;
$main: HTMLElement;
$iconFeatures: NodeListOf<HTMLElement>;
$imageFeatures: NodeListOf<HTMLElement>;
$images: NodeListOf<HTMLElement>;
$imageWrappers: NodeListOf<HTMLElement>;
$texts: NodeListOf<HTMLElement>;
$icons: NodeListOf<HTMLElement>;
constructor($element: HTMLElement) {
this.$element = $element;
this.$main = this.$element.querySelector(
'.supt-section-highlights__product__main'
) as HTMLElement;
this.$iconFeatures = this.$element.querySelectorAll(
'.supt-section-highlights__product__feature.-icon'
);
this.$imageFeatures = this.$element.querySelectorAll(
'.supt-section-highlights__product__feature.-image'
);
this.$images = this.$element.querySelectorAll('img');
this.$imageWrappers = this.$element.querySelectorAll(
'.supt-section-highlights__product__image-wrapper, .supt-section-highlights__product__feature__image-wrapper'
);
this.$texts = this.$element.querySelectorAll(
'.supt-section-highlights__product__title, .supt-section-highlights__product__description, .supt-section-highlights__product__feature__title'
);
this.$icons = this.$element.querySelectorAll(
'.supt-section-highlights__product__feature__icon__inner'
);
}
display(): void {
// Display each cards
// Clip-path for cards with image
animate([this.$main, this.$imageFeatures], {
clipPath: ['inset(0 0 0 100%)', 'inset(0 0 0 0%)'],
duration: 500,
delay: stagger(50, { start: 100 }),
});
// Opacity for cards with icon
animate(this.$iconFeatures, {
opacity: [0, 1],
duration: 0,
delay: stagger(50, { start: 300 }),
});
// Slide down icon
animate(this.$icons, {
y: ['100%', '0%'],
duration: 500,
delay: stagger(50, { start: 300 }),
});
// Zoom-out images
animate(this.$images, {
scale: [1.4, 1.2],
duration: 800,
delay: stagger(50, { start: 100 }),
});
// Animate texts
animate(this.$texts, {
opacity: [0, 1],
y: ['20px', 0],
duration: 500,
delay: stagger(100, { start: 300 }),
});
}
hide(): void {
animate(this.$texts, {
opacity: [1, 0],
y: [0, '-20px'],
duration: 300,
});
// Slide up icon
animate(this.$icons, {
y: ['0%', '-100%'],
duration: 500,
delay: stagger(50),
});
// Zoom-in images
animate(this.$images, {
scale: [1.2, 1],
duration: 800,
delay: stagger(50),
});
// Hide each cards
animate([this.$main, this.$imageFeatures], {
clipPath: ['inset(0 0 0 0%)', 'inset(0 0 0 100%)'],
duration: 500,
delay: stagger(50, { start: 600 }),
});
animate(this.$iconFeatures, {
opacity: [1, 0],
duration: 0,
delay: stagger(50, { start: 300 }),
});
}
}
.supt-section-highlights {
background-color: $color-grey-background;
@mixin clamp padding-block, $spacing-16, $spacing-32, $breakpoint-xs, $breakpoint-xl;
&__title {
@extend %t-h3;
color: $color-black;
text-align: center;
}
&__products {
padding-top: $spacing-16;
@media (min-width: $breakpoint-md) {
height: 350vh;
}
&__inner {
@media (min-width: $breakpoint-md) {
position: sticky;
top: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
/* Navigation offset */
padding-top: 80px;
}
}
}
&__product {
display: grid;
grid-template:
'main main'
'feature-1 feature-2'
'feature-3 feature-4';
gap: 15px;
@media (min-width: $breakpoint-md) {
@mixin clamp height, 450px, 750px, $breakpoint-xs, $breakpoint-xl;
/* area column / rows */
grid-template:
'feature-1 main feature-2' 1fr
'feature-3 main feature-4' 1fr
/ 1fr 1fr 1fr;
position: absolute;
left: 0;
width: 100%;
}
@media (min-width: $breakpoint-lg) {
gap: 30px;
}
&__image-wrapper,
&__feature__image-wrapper {
position: absolute;
inset: 0;
z-index: 0;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
&__main,
&__feature {
position: relative;
border-radius: 24px;
overflow: hidden;
&::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1;
}
}
&__main {
@mixin clamp height, 450px, 750px, $breakpoint-xs, $breakpoint-xl;
grid-area: main;
@media (min-width: $breakpoint-md) {
height: 100%;
}
&::after {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
}
.supt-section-highlights__product__content {
@mixin clamp padding-inline, $spacing-4, $spacing-8, $breakpoint-xs, $breakpoint-xl;
padding-top: $spacing-14;
}
}
&__content {
@mixin clamp gap, 8px, 24px, $breakpoint-xs, $breakpoint-xl;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
z-index: 2;
}
&__title,
&__description {
color: $color-white;
}
&__title {
@extend %t-h2;
@mixin clamp font-size, 22, 32, $breakpoint-xs, $breakpoint-xl;
@mixin clamp line-height, 24, 36, $breakpoint-xs, $breakpoint-xl;
margin: 0;
}
&__description {
@extend %t-body-s;
}
&__feature {
/* Start at 2, as the __main is the first child */
&:nth-child(2) {
grid-area: feature-1;
}
&:nth-child(3) {
grid-area: feature-2;
}
&:nth-child(4) {
grid-area: feature-3;
}
&:nth-child(5) {
grid-area: feature-4;
}
.supt-section-highlights__product__content {
@mixin clamp padding-inline, $spacing-4, $spacing-10, $breakpoint-xs, $breakpoint-xl;
@mixin clamp padding-block, $spacing-7, $spacing-10, $breakpoint-xs, $breakpoint-xl;
height: 100%;
}
&__title {
@extend %t-h4;
color: $color-black;
text-align: center;
margin-bottom: 0;
@media (min-width: $breakpoint-md) {
padding: 0 $spacing-10;
}
}
&__icon {
overflow: hidden;
&__inner {
display: block;
padding: 8px;
}
svg {
display: block;
width: 48px;
height: 48px;
@media (min-width: $breakpoint-md) {
width: 60px;
height: 60px;
}
}
}
/* Button wrapper for the icon variant */
.supt-button__wrapper {
position: absolute;
inset: 0;
z-index: -1;
border-radius: 24px;
box-shadow: none;
padding: 16px;
}
.supt-button__inner {
height: 100%;
}
.supt-button__inner,
.supt-button__mask,
.supt-button__mask__inner {
border-radius: 16px;
}
&.-image {
.supt-section-highlights__product__feature__title {
color: $color-white;
}
}
&.-icon {
box-shadow:
8px 8px 16px 0 $color-grey-1,
-8px -8px 16px 0 $color-white;
}
}
&__main,
&__feature.-image {
@media (min-width: $breakpoint-md) {
clip-path: inset(0 0 0 100%);
}
}
&__feature.-icon {
@media (min-width: $breakpoint-md) {
opacity: 0;
}
}
&:nth-child(1) {
.supt-section-highlights__product__image {
object-position: bottom;
}
}
&:not(:first-child) {
padding-top: $spacing-16;
@media (min-width: $breakpoint-md) {
padding-top: 0;
}
}
}
}