<div class="efl-get-started" data-behaviour="efl-get-started">
<div class="get-started-navigation" data-behaviour="get-started-navigation">
<ul role="tablist" class="get-started-navigation__tabs">
<li>
<a id=get-started-intro role="tab" tabindex="0" aria-selected="true">
Intro video
</a>
</li>
<li>
<a id=get-started-become-coach role="tab" tabindex="0" aria-selected="false">
Why become a caoch
</a>
</li>
<li>
<a id=get-started-courses role="tab" tabindex="0" aria-selected="false">
Entry level courses
</a>
</li>
<li>
<a id=get-started-learning role="tab" tabindex="0" aria-selected="false">
Learning support
</a>
</li>
<li>
<a id=get-started-faq role="tab" tabindex="0" aria-selected="false">
FAQ
</a>
</li>
</ul>
</div>
<div class="get-started-next-prev-cta right-cta">
<canvas class="prev-step hidden" width="158" height="32"></canvas>
<canvas class="next-step" width="158" height="32"></canvas>
<canvas class="mobile-swipe" width="208" height="56"></canvas>
</div>
<div class="efl-get-started__sections">
<div class="get-started-content get-started-intro" data-page="get-started-intro" data-behavior="get-started-intro" data-video-type="youtube" data-video-id="ufLSGCZEPrg">
<div class="get-started-intro__wrapper">
<div class="get-started-intro__player-wrap">
<div id=0 class="intro-video-player"></div>
<img src="/assets/example-content/get-started-intro-image.jpg" />
</div>
<div class="get-started-intro__overlay">
<h2>Get ready to play your part in the greatest game on Earth</h2>
<p>Watch our introduction to England Football Learning video, or scroll down to find out how we can support you learning journey</p>
<a href="/" class="cta cta--primary play-video" id="play-video" tabindex="0">Play Video</a>
</div>
<div class="get-started-intro__hero-video">
<div class="get-started-video" data-behavior="get-started-video" data-video-type="youtube" data-video-id="R7qSx1Zb-NQ">
<div class="get-started-video__player-wrap">
<div id=intro class="get-start-video"></div>
</div>
<div class="get-started-video__control-overlay">
<a class="full-screen" href="#" role="full screen" aria-label="video full screen" tabindex="0"></a>
<a class="close-video" href="#" role="close video" aria-label="video close" tabindex="0"></a>
<div class="play-pause-controls">
<a class="play-pause-controls__play hidden" role="video play" aria-label="video play button" tabindex="0" aria-selected="true"></a>
<a class="play-pause-controls__pause" role="video pause button" aria-label="video pause button" tabindex="0" aria-selected="true"></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="get-started-content get-started-become-coach" data-speed="4" data-lag="2" data-page="get-started-become-coach" data-behaviour="get-started-become-coach">
<div class="get-started-index-card-image">
<picture>
<source media="(max-width: 819px)" srcset="/assets/example-content/get-started-v2/become-coach-mob.png">
<source media="(min-width: 820px)" srcset="/assets/example-content/get-started-v2/become-coach-desk.png">
<img class="bg-image" src="/assets/example-content/get-started-v2/become-coach-desk.png" alt="" loading="lazy">
</picture>
</div>
<div class="get-started-become-coach__overlay">
<div class="get-started-become-coach__overlay--wrapper">
<div class="carousel" data-behavior="get-started-carousel-glide">
<div data-glide-el="track">
<ul class="glide__slides">
<div class="get-started-index-card-text">
<div class="get-started-index-card-text__wrapper ">
<div class="category">get started</div>
<h2>Why become a coach</h2>
<p>Get started with England Football Learning and join millions in growing the grassroots game. We offer support, guidance, and advice to help you learn and find your role.</p>
</div>
</div>
<a href="#" target="_blank" class="efl-card efl-card--horizontal " aria-label="How to coach passing in football">
<div class="efl-card__image ">
<img src="/assets/example-content/news-horizontal-1.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">CAT TITLE</div>
<div class="efl-card__content--title">How to coach passing in football</div>
<p class="efl-card__content--description">Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance</p>
</div>
<span class="cta cta--efl get-started-cta" tabindex="0">BECOME AN EE PLAYMAKER</span>
</div>
</a>
<a href="#" target="_blank" class="efl-card efl-card--horizontal " id="video-dialog-label" data-behavior="get-started-lightbox" data-video-id="ufLSGCZEPrg" data-video-type="youtube" aria-label="Not Sure How or Where to Start?">
<div class="efl-card__image efl-card__image--video">
<img src="/assets/example-content/news-horizontal-2.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">CAT TITLE</div>
<div class="efl-card__content--title">Not Sure How or Where to Start?</div>
<p class="efl-card__content--description">Catherine began taking her children to weekly football sessions, and is now coaching with confidence!</p>
</div>
<span class="cta cta--efl get-started-cta" tabindex="0">BECOME AN EE PLAYMAKER</span>
</div>
</a>
<a href="#" class="efl-card efl-card--horizontal " id="video-dialog-label" data-behavior="get-started-lightbox" data-video-id="ufLSGCZEPrg" data-video-type="youtube" aria-label="What does a grassroots coach do">
<div class="efl-card__image efl-card__image--video">
<img src="/assets/example-content/news-horizontal-3.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">case study video</div>
<div class="efl-card__content--title">What does a grassroots coach do</div>
<p class="efl-card__content--description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu odio lorem.</p>
</div>
</div>
</a>
<a href="#" target="_blank" class="efl-card efl-card--horizontal " id="video-dialog-label" data-behavior="get-started-lightbox" data-video-id="ufLSGCZEPrg" data-video-type="youtube" aria-label="Not Sure How or Where to Start?">
<div class="efl-card__image efl-card__image--video">
<img src="/assets/example-content/news-horizontal-2.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">CAT TITLE</div>
<div class="efl-card__content--title">Not Sure How or Where to Start?</div>
<p class="efl-card__content--description">Catherine began taking her children to weekly football sessions, and is now coaching with confidence!</p>
</div>
<span class="cta cta--efl get-started-cta" tabindex="0">BECOME AN EE PLAYMAKER</span>
</div>
</a>
<a href="#" class="efl-card efl-card--horizontal " id="video-dialog-label" data-behavior="get-started-lightbox" data-video-id="ufLSGCZEPrg" data-video-type="youtube" aria-label="What does a grassroots coach do">
<div class="efl-card__image efl-card__image--video">
<img src="/assets/example-content/news-horizontal-3.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">case study video</div>
<div class="efl-card__content--title">What does a grassroots coach do</div>
<p class="efl-card__content--description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu odio lorem.</p>
</div>
</div>
</a>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="get-started-content get-started-courses" data-page="get-started-courses" data-behaviour="get-started-courses">
<div class="get-started-index-card-image">
<picture>
<source media="(max-width: 819px)" srcset="/assets/example-content/get-started-v2/get-started-courses-mob.jpg">
<source media="(min-width: 820px)" srcset="/assets/example-content/get-started-v2/get-started-courses-desk.jpg">
<img class="bg-image" src="/assets/example-content/get-started-v2/get-started-courses-desk.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="get-started-courses__overlay">
<div class="get-started-courses__overlay--wrapper">
<div class="slides-container">
<ul class="slides">
<div class="get-started-index-card-text">
<div class="get-started-index-card-text__wrapper white">
<div class="category">How to coach passing in football</div>
<h2>Get started in grassroots football</h2>
<p>Before you get started you have to do...</p>
</div>
</div>
<a href="#" target="_blank" class="efl-card efl-card--horizontal " id="video-dialog-label" data-behavior="get-started-lightbox" data-video-id="ufLSGCZEPrg" data-video-type="youtube" aria-label="How to coach passing in football">
<div class="efl-card__image efl-card__image--video">
<img src="/assets/example-content/news-horizontal-1.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">CAT TITLE</div>
<div class="efl-card__content--title">How to coach passing in football</div>
<p class="efl-card__content--description">Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance</p>
</div>
<span class="cta cta--efl get-started-cta" tabindex="0">BECOME AN EE PLAYMAKER</span>
</div>
</a>
<a href="#" target="_blank" class="efl-card efl-card--horizontal " id="video-dialog-label" data-behavior="get-started-lightbox" data-video-id="ufLSGCZEPrg" data-video-type="youtube" aria-label="How to coach passing in football">
<div class="efl-card__image efl-card__image--video">
<img src="/assets/example-content/news-horizontal-2.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">CAT TITLE</div>
<div class="efl-card__content--title">How to coach passing in football</div>
<p class="efl-card__content--description">Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance</p>
</div>
<span class="cta cta--efl get-started-cta" tabindex="0">BECOME AN EE PLAYMAKER</span>
</div>
</a>
<a href="#" target="_blank" class="efl-card efl-card--horizontal " id="video-dialog-label" data-behavior="get-started-lightbox" data-video-id="ufLSGCZEPrg" data-video-type="youtube" aria-label="Why you should try futsal">
<div class="efl-card__image efl-card__image--video">
<img src="/assets/example-content/news-horizontal-3.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">CAT TITLE</div>
<div class="efl-card__content--title">Why you should try futsal</div>
<p class="efl-card__content--description">Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance</p>
</div>
<span class="cta cta--efl get-started-cta" tabindex="0">BECOME AN EE PLAYMAKER</span>
</div>
</a>
<a href="#" target="_blank" class="efl-card efl-card--horizontal " id="video-dialog-label" data-behavior="get-started-lightbox" data-video-id="ufLSGCZEPrg" data-video-type="youtube" aria-label="Why you should try futsal">
<div class="efl-card__image efl-card__image--video">
<img src="/assets/example-content/news-horizontal-4.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">CAT TITLE</div>
<div class="efl-card__content--title">Why you should try futsal</div>
<p class="efl-card__content--description">Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance</p>
</div>
<span class="cta cta--efl get-started-cta" tabindex="0">BECOME AN EE PLAYMAKER</span>
</div>
</a>
<a href="#" target="_blank" class="efl-card efl-card--horizontal " id="video-dialog-label" data-behavior="get-started-lightbox" data-video-id="ufLSGCZEPrg" data-video-type="youtube" aria-label="Why you should try futsal">
<div class="efl-card__image efl-card__image--video">
<img src="/assets/example-content/news-horizontal-1.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">CAT TITLE</div>
<div class="efl-card__content--title">Why you should try futsal</div>
<p class="efl-card__content--description">Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance</p>
</div>
<span class="cta cta--efl get-started-cta" tabindex="0">BECOME AN EE PLAYMAKER</span>
</div>
</a>
</ul>
</div>
</div>
</div>
</div>
<div class="get-started-content get-started-learning" data-page="get-started-learning" data-behaviour="get-started-learning">
<div class="get-started-index-card-image">
<picture>
<source media="(max-width: 819px)" srcset="/assets/example-content/get-started-v2/get-started-learning-mob.jpg">
<source media="(min-width: 820px)" srcset="/assets/example-content/get-started-v2/get-started-learning-desk.jpg">
<img class="bg-image" src="/assets/example-content/get-started-v2/get-started-learning-desk.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="get-started-learning__overlay">
<div class="get-started-learning__overlay--wrapper">
<div class="slides-container">
<ul class="slides">
<div class="get-started-index-card-text">
<div class="get-started-index-card-text__wrapper ">
<div class="category">learning support</div>
<h2>Session plans, articles, podcasts & community</h2>
<p>England football learning offers a wide range of non-coaching qualifications that will help you progress in your career. From medical training to talent identification to safeguarding, we have something for everyone.</p>
</div>
</div>
<a href="#" target="_blank" class="efl-card efl-card--get-started-session " aria-label="The basics content goes here">
<div class="efl-card__image ">
<img src="/assets/example-content/get-started-session-1.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">session</div>
<div class="efl-card__content--title">The basics content goes here</div>
<p class="efl-card__content--description">Players will develop their understanding of: what scanning is why it’s important to scan the pitch before receiving the b all how their body</p>
</div>
<span class="cta cta--efl get-started-cta" tabindex="0">read more</span>
</div>
</a>
<a href="#" target="_blank" class="efl-card efl-card--get-started-session " aria-label="The basics content goes here">
<div class="efl-card__image ">
<img src="/assets/example-content/get-started-session-1.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">session</div>
<div class="efl-card__content--title">The basics content goes here</div>
<p class="efl-card__content--description">Players will develop their understanding of: what scanning is why it’s important to scan the pitch before receiving the b all how their body</p>
</div>
<span class="cta cta--efl get-started-cta" tabindex="0">read more</span>
</div>
</a>
<a href="#" target="_blank" class="efl-card efl-card--get-started-article " aria-label="The basics content goes here">
<div class="efl-card__image ">
<img src="/assets/example-content/get-started-article-1.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">article</div>
<div class="efl-card__content--title">The basics content goes here</div>
<p class="efl-card__content--description">Players will develop their understanding of: what scanning is why it’s important to scan the pitch before receiving the b all how their body</p>
</div>
<span class="cta cta--efl get-started-cta" tabindex="0">read more</span>
</div>
</a>
<a href="#" target="_blank" class="efl-card efl-card--get-started-article " aria-label="The basics content goes here">
<div class="efl-card__image ">
<img src="/assets/example-content/get-started-article-1.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">article</div>
<div class="efl-card__content--title">The basics content goes here</div>
<p class="efl-card__content--description">Players will develop their understanding of: what scanning is why it’s important to scan the pitch before receiving the b all how their body</p>
</div>
<span class="cta cta--efl get-started-cta" tabindex="0">read more</span>
</div>
</a>
<a href="#" target="_blank" class="efl-card efl-card--get-started-podcast " aria-label="Introducing England Football Learning Live">
<div class="efl-card__image ">
<img src="/assets/example-content/get-started-podcast-img.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">coachcast</div>
<div class="efl-card__content--title">Introducing England Football Learning Live</div>
<p class="efl-card__content--description">Our first live virtual conference arrives this summer – and you can be a part of it! Laura Seth, our performance analysis and insights manager, provides all</p>
</div>
<span class="cta cta--efl get-started-cta" tabindex="0">read more</span>
</div>
</a>
<a href="#" target="_blank" class="efl-card efl-card--get-started-youtube " aria-label="EFL Youtube channel">
<div class="efl-card__image ">
<img src="/assets/example-content/get-started-youtube-img.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">youtube</div>
<div class="efl-card__content--title">EFL Youtube channel</div>
<p class="efl-card__content--description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit purus vel malesuada vehicula. Quisque tincidunt venenatis velit, molestie tincidunt magna dictum ac.</p>
</div>
<span class="cta cta--efl get-started-cta" tabindex="0">read more</span>
</div>
</a>
<a href="#" target="_blank" class="efl-card efl-card--get-started-community " aria-label="Join the FA Community">
<div class="efl-card__image ">
<img src="/assets/example-content/get-started-community-img.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">community</div>
<div class="efl-card__content--title">Join the FA Community</div>
<p class="efl-card__content--description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu odio lorem.</p>
</div>
<span class="cta cta--efl get-started-cta" tabindex="0">read more</span>
</div>
</a>
</ul>
</div>
</div>
</div>
</div>
<div class="get-started-content get-started-faq" data-page="get-started-faq" data-behavior="get-started-faq">
<div class="get-started-index-card-image">
<picture>
<source media="(max-width: 819px)" srcset="/assets/example-content/get-started-v2/get-started-faq-mob.jpg">
<source media="(min-width: 820px)" srcset="/assets/example-content/get-started-v2/get-started-faq-desk.jpg">
<img class="bg-image" src="/assets/example-content/get-started-v2/get-started-faq-desk.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="get-started-faq__overlay">
<div class="get-started-faq__overlay--wrapper">
<div class="slides-container">
<ul class="slides">
<li class="step-1">
<div class="get-started-index-card-text">
<div class="get-started-index-card-text__wrapper white">
<div class="category">still not sure</div>
<h2>Frequently asked questions about getting involved in grassroots football</h2>
<p>Before you get started you have to do...</p>
</div>
</div>
</li>
<li class="step-2">
<div class="accordion" data-behaviour="accordion">
<div class="accordion__content">
<h3>
<button class="accordion__trigger" id="question-1.1" aria-expanded="false" aria-controls="question-1.1-panel">
I want to get involved but don't want to be a coach, what are my options?
<span class="accordion__trigger-icon fill-arrow"></span>
</button>
</h3>
<div class="accordion__panel" id="question-1.1-panel" role="region" aria-labelledby="question-1.1">
<div class="accordion__panel--aligncontent" aria-hidden="true">
<div class="rte-content rte-content--normal">
<p>I There are so many ways to get involved in football outside of being a coach. Take a look at some of our other courses and find something suitable for you: -Medical Courses -Safeguarding Courses -Talent ID/Scouting Courses -PE CPD for Teachers I want to get involved but don't want to be a coach, I want to get involved but don't want to be a coach, what are my options? I want to get involved but don't want to be a coach, what are my options? I There are so many ways to get involved in football outside of being a coach I There are so many ways to get involved in football outside of being a coach I There are so many ways to get involved in football outside of being a coach I There are so many ways to get involved in football outside of being a coach what are my options? I want to get involved but don't want to be a coach, what are my options? I There are so many ways to get involved in football outside of being a coach I There are so many ways to get involved in football outside of being a coach I There are so many ways to get involved in football outside of being a coach I There are so many ways to get involved in football outside of being a coach</p>
</div>
</div>
</div>
</div>
<div class="accordion__content">
<h3>
<button class="accordion__trigger" id="question-1.2" aria-expanded="false" aria-controls="question-1.2-panel">
I'm ready to get involved, how can I find local opportunities or clubs?
<span class="accordion__trigger-icon fill-arrow"></span>
</button>
</h3>
<div class="accordion__panel" id="question-1.2-panel" role="region" aria-labelledby="question-1.2">
<div class="accordion__panel--aligncontent" aria-hidden="true">
<div class="rte-content rte-content--normal">
<p>I There are so many ways to get involved in football outside of being a coach. Take a look at some of our other courses and find something suitable for you: -Medical Courses -Safeguarding Courses -Talent ID/Scouting Courses -PE CPD for Teachers</p>
</div>
</div>
</div>
</div>
<div class="accordion__content">
<h3>
<button class="accordion__trigger" id="question-1.3" aria-expanded="false" aria-controls="question-1.3-panel">
Can I continue my learning outside of courses?
<span class="accordion__trigger-icon fill-arrow"></span>
</button>
</h3>
<div class="accordion__panel" id="question-1.3-panel" role="region" aria-labelledby="question-1.3">
<div class="accordion__panel--aligncontent" aria-hidden="true">
<div class="rte-content rte-content--normal">
<p>I There are so many ways to get involved in football outside of being a coach. Take a look at some of our other courses and find something suitable for you: -Medical Courses -Safeguarding Courses -Talent ID/Scouting Courses -PE CPD for Teachers</p>
</div>
</div>
</div>
</div>
<div class="accordion__content">
<h3>
<button class="accordion__trigger" id="question-1.4" aria-expanded="false" aria-controls="question-1.4-panel">
Can I access additional support or funding for courses?
<span class="accordion__trigger-icon fill-arrow"></span>
</button>
</h3>
<div class="accordion__panel" id="question-1.4-panel" role="region" aria-labelledby="question-1.4">
<div class="accordion__panel--aligncontent" aria-hidden="true">
<div class="rte-content rte-content--normal">
<p>I There are so many ways to get involved in football outside of being a coach. Take a look at some of our other courses and find something suitable for you: -Medical Courses -Safeguarding Courses -Talent ID/Scouting Courses -PE CPD for Teachers</p>
</div>
</div>
</div>
</div>
<div class="accordion__content">
<h3>
<button class="accordion__trigger" id="question-1.5" aria-expanded="false" aria-controls="question-1.5-panel">
I want to get involved but don't want to be a coach, what are my options?
<span class="accordion__trigger-icon fill-arrow"></span>
</button>
</h3>
<div class="accordion__panel" id="question-1.5-panel" role="region" aria-labelledby="question-1.5">
<div class="accordion__panel--aligncontent" aria-hidden="true">
<div class="rte-content rte-content--normal">
<p>I There are so many ways to get involved in football outside of being a coach. Take a look at some of our other courses and find something suitable for you: -Medical Courses -Safeguarding Courses -Talent ID/Scouting Courses -PE CPD for Teachers</p>
</div>
</div>
</div>
</div>
<div class="accordion__content">
<h3>
<button class="accordion__trigger" id="question-1.6" aria-expanded="false" aria-controls="question-1.6-panel">
Can I continue my learning outside of courses?
<span class="accordion__trigger-icon fill-arrow"></span>
</button>
</h3>
<div class="accordion__panel" id="question-1.6-panel" role="region" aria-labelledby="question-1.6">
<div class="accordion__panel--aligncontent" aria-hidden="true">
<div class="rte-content rte-content--normal">
<p>I There are so many ways to get involved in football outside of being a coach. Take a look at some of our other courses and find something suitable for you: -Medical Courses -Safeguarding Courses -Talent ID/Scouting Courses -PE CPD for Teachers</p>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
No notes defined.
/* No context defined. */
/* stylelint-disable */
import { gsap } from 'gsap';
import { Rive, Fit, Layout } from '@rive-app/canvas';
export const animationTime = window.innerWidth >= 768 ? 1000 : 300;
export const slideTime = window.innerWidth >= 768 ? 100 : 10;
export const gsapAnimation = window.innerWidth >= 768 ? 1 : 0.6;
export const fadeInElement = element => {
gsap.to(element, {
opacity: 1,
ease: 'power2',
scrub: true,
yoyo: 'true',
});
};
export const fadeOutElement = element => {
gsap.to(element, {
opacity: 0.3,
ease: 'power2',
scrub: true,
yoyo: 'true',
});
};
export const bindRiveFIles = (element, deskArrow, mobileArrow) => {
const skipNext = element.querySelector('.next-step');
const skipPrev = element.querySelector('.prev-step');
const mobileSwipe = element.querySelector('.mobile-swipe');
const MOBILE_BREAKPOINT = 768;
const lyout = new Layout({
fit: Fit.Cover,
});
if (window.innerWidth >= MOBILE_BREAKPOINT) {
if (skipNext) {
const riveAnimation = new Rive({
src: '/assets/example-content/next_desktop.riv',
canvas: skipNext,
layout: lyout,
onLoad: () => {
riveAnimation.resizeDrawingSurfaceToCanvas();
},
});
riveAnimation.play(deskArrow);
}
if (skipPrev) {
const riveAnimation2 = new Rive({
src: '/assets/example-content/back_desktop.riv',
canvas: skipPrev,
layout: lyout,
onLoad: () => {
riveAnimation2.resizeDrawingSurfaceToCanvas();
},
});
riveAnimation2.play(deskArrow);
}
} else if (mobileSwipe) {
// eslint-disable-next-line operator-linebreak
const swipeArrow =
mobileArrow === 'End' // eslint-disable-next-line operator-linebreak
? '/assets/example-content/end_swipe.riv' // eslint-disable-next-line operator-linebreak
: '/assets/example-content/swipe_mobile.riv'; // eslint-disable-next-line operator-linebreak
const riveAnimation = new Rive({
src: swipeArrow,
canvas: mobileSwipe,
layout: lyout,
onLoad: () => {
riveAnimation.resizeDrawingSurfaceToCanvas();
},
});
riveAnimation.play(mobileArrow);
}
};
// eslint-disable-next-line complexity
export const setArrowPosition = element => {
const MOBILE_BREAKPOINT = 768;
const containerHeight = 601;
const nextPrevCta = element.querySelector('.get-started-next-prev-cta');
const headerEle = document.querySelector('.global-fixed-header');
const { offsetHeight: headerEleHt } = headerEle;
const headerEleHeight =
window.innerWidth <= MOBILE_BREAKPOINT ? 105 : headerEleHt;
const getfooter = document.querySelector('.footer-section');
const footerScroll = getfooter.getAttribute('scroll-count');
const footerHeight = getfooter.offsetHeight;
const footerOfset = footerScroll === '2' ? footerHeight : 0;
const activeTab = document.querySelector(
'.get-started-navigation a[aria-selected=true]'
);
if (window.innerWidth < MOBILE_BREAKPOINT) {
if (!element.classList.contains('nav-hidden')) {
// height - menuheight - riveheight - bottommargin
const differentOffset =
activeTab.getAttribute('id') === 'get-started-intro' // eslint-disable-next-line operator-linebreak
? headerEleHeight // eslint-disable-next-line operator-linebreak
: 0; // eslint-disable-next-line operator-linebreak
nextPrevCta.style.top = `${window.innerHeight -
differentOffset -
footerOfset -
40 -
16}px`;
} else {
// height - riveheight - bottommargin
nextPrevCta.style.top = `${window.innerHeight - footerOfset - 40 - 16}px`;
}
} else if (!element.classList.contains('nav-hidden')) {
if (window.innerHeight <= containerHeight) {
// height - menuheight - riveheight - bottommargin
nextPrevCta.style.top = `${window.innerHeight -
headerEleHeight -
footerOfset -
32 -
24}px`;
} else {
// height - menuheight - riveheight - bottommargin
nextPrevCta.style.top = `${window.innerHeight -
headerEleHeight -
footerOfset -
32 -
60}px`;
}
} else {
// eslint-disable-next-line no-lonely-if
if (window.innerHeight <= containerHeight) {
// height - riveheight - bottommargin
nextPrevCta.style.top = `${window.innerHeight - footerOfset - 32 - 24}px`;
} else {
// height - riveheight - bottommargin
nextPrevCta.style.top = `${window.innerHeight - footerOfset - 32 - 60}px`;
}
}
};
export const showFixedHeader = element => {
const getstartedNavigation = element.querySelector('.get-started-navigation');
const mainNavigation = document.querySelector('.global-fixed-header');
const getStartedSection = document.querySelector('.efl-get-started');
const headerEle = document.querySelector('.global-fixed-header');
const { offsetHeight: headerEleHt } = headerEle;
const headerEleHeight = window.innerWidth <= 768 ? 105 : headerEleHt;
// eslint-disable-next-line no-param-reassign
mainNavigation.style.transition = `initial`;
gsap.to(mainNavigation, {
top: 0,
ease: 'power2',
scrub: true,
yoyo: 'true',
});
gsap.to(element, {
marginTop: `${headerEleHeight}px`,
ease: 'power2',
scrub: true,
yoyo: 'true',
});
getstartedNavigation.classList.remove('nav-sticky');
getStartedSection.classList.remove('nav-hidden');
setArrowPosition(element);
};
export const hideFixedHeader = element => {
const getstartedNavigation = element.querySelector('.get-started-navigation');
const mainNavigation = document.querySelector('.global-fixed-header');
const getStartedSection = document.querySelector('.efl-get-started');
const headerEle = document.querySelector('.global-fixed-header');
const { offsetHeight: headerEleHt } = headerEle;
const headerEleHeight = window.innerWidth <= 768 ? 105 : headerEleHt;
getstartedNavigation.classList.add('nav-sticky');
// eslint-disable-next-line no-param-reassign
mainNavigation.style.transition = `initial`;
getStartedSection.classList.add('nav-hidden');
gsap.to(mainNavigation, {
top: `-${headerEleHeight}px`,
ease: 'power2',
scrub: true,
yoyo: 'true',
});
gsap.to(element, {
marginTop: 0,
ease: 'power2',
scrub: true,
yoyo: 'true',
});
setArrowPosition(element);
};
export const showSiteFooter = () => {
const getStarted = document.querySelector('.efl-get-started');
const getfooter = document.querySelector('.footer-section');
const getSections = document.querySelector('.efl-get-started__sections');
// getfooter.classList.remove('visually-hidden');
getfooter.style.bottom = '2px';
getSections.style.top = `-${getfooter.offsetHeight}px`;
setArrowPosition(getStarted);
};
export const hideSiteFooter = () => {
const getStarted = document.querySelector('.efl-get-started');
const getfooter = document.querySelector('.footer-section');
const getSections = document.querySelector('.efl-get-started__sections');
// eslint-disable-next-line Missing radix parameter
let scrollCount = parseInt(getfooter.getAttribute('scroll-count'), 10);
getfooter.style.bottom = `-${getfooter.offsetHeight + 2}px`;
getSections.style.top = 0;
if (scrollCount === 2) {
scrollCount -= 1;
}
getfooter.setAttribute('scroll-count', scrollCount);
setArrowPosition(getStarted);
setTimeout(() => {
// getfooter.classList.add('visually-hidden');
}, 1000);
};
export const getActiveTabId = element => {
const MOBILE_BREAKPOINT = 768;
const getstartedNavigation = element.querySelector('.get-started-navigation');
const activeTab = getstartedNavigation.querySelector(
`li > a[aria-selected='true']`
);
if (window.innerWidth < MOBILE_BREAKPOINT) {
setTimeout(() => {
activeTab.scrollIntoView({
behavior: 'smooth',
inline: 'center',
});
}, 100);
}
return activeTab.getAttribute('id');
};
export default parentElement => {
let currentIndex = 0;
const MOBILE_BREAKPOINT = 768;
const getStartedTabs = parentElement.querySelectorAll(
'.get-started-navigation li a'
);
const footer = document.querySelector('.footer-section');
const mainNavigation = document.querySelector('.global-fixed-header');
const getstartedNavigation = parentElement.querySelector(
'.get-started-navigation'
);
const getfirsttab = getstartedNavigation.querySelector('li:first-child a');
const getStartedSection = document.querySelector('.efl-get-started');
const getSections = document.querySelector('.efl-get-started__sections');
const headerEle = document.querySelector('.global-fixed-header');
const introContent = getSections.querySelector('.get-started-intro');
const becomeCoachContent = getSections.querySelector(
'.get-started-become-coach'
);
const coursesContent = getSections.querySelector('.get-started-courses');
const learningContent = getSections.querySelector('.get-started-learning');
const faqContent = getSections.querySelector('.get-started-faq');
const introContentOverlay = introContent.querySelector(
'.get-started-intro__overlay'
);
const introContentOverlayText1 = introContent.querySelector(
'.get-started-intro__overlay h2'
);
const introContentOverlayText2 = introContent.querySelector(
'.get-started-intro__overlay p'
);
const introContentOverlayCta = introContent.querySelector(
'.get-started-intro__overlay a'
);
const becomeCoachContentOverlay = becomeCoachContent.querySelector(
'.get-started-become-coach__overlay'
);
const coursesContentOverlay = coursesContent.querySelector(
'.get-started-courses__overlay'
);
const learningContentOverlay = learningContent.querySelector(
'.get-started-learning__overlay'
);
const { offsetHeight: headerEleHt } = headerEle;
const headerEleHeight =
window.innerWidth <= MOBILE_BREAKPOINT ? 105 : headerEleHt;
let sectionWidth;
let scrollingScreen = false;
let xDown = null;
let yDown = null;
const nextPrevCta = parentElement.querySelector('.get-started-next-prev-cta');
const skipNext = parentElement.querySelector('.next-step');
const skipPrev = parentElement.querySelector('.prev-step');
if (window.innerWidth <= MOBILE_BREAKPOINT) {
sectionWidth = window.innerWidth;
} else {
sectionWidth = window.innerWidth;
}
const sectionsItems = parentElement.querySelectorAll(
'.efl-get-started__sections > *'
);
sectionsItems.forEach(item => {
// eslint-disable-next-line no-param-reassign
// item.style.height = `${sectionHeight}px`;
if (window.innerWidth <= MOBILE_BREAKPOINT) {
const slides = item.querySelectorAll('ul > li');
const slideUi = item.querySelector('ul');
if (slides) {
slides.forEach(slide => {
// eslint-disable-next-line no-param-reassign
slide.style.width = `${sectionWidth}px`;
});
if (slideUi) {
// eslint-disable-next-line no-param-reassign
slideUi.style.width = `${sectionWidth * slides.length}px`;
}
}
}
});
window.scroll(0, 0);
setArrowPosition(parentElement);
// eslint-disable-next-line complexity
const switchToSections = tab => {
const subPages = parentElement.querySelectorAll(
'.efl-get-started__sections > *'
);
const allSections = parentElement.querySelector(
'.efl-get-started__sections'
);
const sectionImages = parentElement.querySelectorAll(
'.get-started-index-card-image'
);
sectionImages.forEach(sectionImg => {
sectionImg.classList.remove('active');
});
// eslint-disable-next-line complexity
subPages.forEach((subpage, index) => {
// switch to sub pages
if (tab.id === subpage.dataset.page) {
gsap.to(allSections, {
duration: gsapAnimation,
ease: 'power2',
transform: `translateX(-${sectionWidth * index}px)`,
});
gsap.to(
'.get-started-intro__overlay, .get-started-become-coach__overlay, .get-started-courses__overlay, .get-started-learning__overlay, .get-started-faq__overlay',
{
x: 0,
ease: 'power2',
scrub: true,
yoyo: 'true',
}
);
}
hideSiteFooter();
if (tab.id === 'get-started-intro') {
showFixedHeader(parentElement);
nextPrevCta.classList.add('right-cta');
skipPrev.classList.add('hidden');
skipNext.classList.remove('hidden');
} else {
hideFixedHeader(parentElement);
nextPrevCta.classList.remove('right-cta');
skipPrev.classList.remove('hidden');
skipNext.classList.remove('hidden');
}
if (tab.id === 'get-started-intro') {
const introTabText1 = document.querySelector(
'.get-started-intro__overlay h2'
);
const introTabText2 = document.querySelector(
'.get-started-intro__overlay p'
);
const introTabCta = document.querySelector(
'.get-started-intro__overlay a'
);
fadeInElement(introTabText1);
fadeInElement(introTabText2);
fadeInElement(introTabCta);
bindRiveFIles(nextPrevCta, 'White Arrow', 'Start');
}
if (tab.id === 'get-started-become-coach') {
const becomeCoachTab = document.querySelector(
`.get-started-content[data-page='get-started-become-coach']`
);
const becomeCoachslides = becomeCoachTab.querySelectorAll(
'.glide__slides > li'
);
const becomeCoachContainer = becomeCoachTab.querySelector(
'.glide__slides'
);
const becomeCoachActiveSlide = becomeCoachslides[0];
becomeCoachslides.forEach(slide => {
slide.classList.remove('glide__slide--active');
});
becomeCoachActiveSlide.classList.add('glide__slide--active');
fadeInElement(becomeCoachActiveSlide);
if (window.innerWidth >= MOBILE_BREAKPOINT) {
gsap.to(becomeCoachContainer, {
duration: gsapAnimation,
ease: 'power2',
transform: `translate3d(0px, 0px, 0px)`,
});
} else {
becomeCoachContainer.style.transform = `translateX(0px)`;
}
bindRiveFIles(nextPrevCta, 'Blue Arrow', 'Left & Right BLUE');
}
if (tab.id === 'get-started-courses') {
const courseTab = document.querySelector(
`.get-started-content[data-page='get-started-courses']`
);
const courseslides = courseTab.querySelectorAll('.slides > li');
const courseContainer = courseTab.querySelector('.slides');
const coursesActiveSlide = courseslides[0];
courseslides.forEach(slide => {
slide.classList.remove('active');
});
coursesActiveSlide.classList.add('active');
fadeInElement(coursesActiveSlide);
if (window.innerWidth >= MOBILE_BREAKPOINT) {
gsap.to(courseContainer, {
xPercent: 0,
ease: 'power2',
duration: gsapAnimation,
});
} else {
courseContainer.style.transform = `translateX(0)`;
}
bindRiveFIles(nextPrevCta, 'White Arrow', 'Left & Right WHITE');
}
if (tab.id === 'get-started-learning') {
const learningTab = document.querySelector(
`.get-started-content[data-page='get-started-learning']`
);
const learningslides = learningTab.querySelectorAll('.slides > li');
const learningContainer = learningTab.querySelector('.slides');
const learningActiveSlide = learningslides[0];
learningslides.forEach(slide => {
slide.classList.remove('active');
});
learningActiveSlide.classList.add('active');
fadeInElement(learningActiveSlide);
if (window.innerWidth >= MOBILE_BREAKPOINT) {
gsap.to(learningContainer, {
xPercent: 0,
ease: 'power2',
duration: gsapAnimation,
});
} else {
learningContainer.style.transform = `translateX(0)`;
}
bindRiveFIles(nextPrevCta, 'Blue Arrow', 'Left & Right BLUE');
}
if (tab.id === 'get-started-faq') {
const faqTab = document.querySelector(
`.get-started-content[data-page='get-started-faq']`
);
const faqslides = faqTab.querySelectorAll('.slides > li');
const faqContainer = faqTab.querySelector('.slides');
const faqActiveSlide = faqslides[0];
const faqSlideContainer = faqTab.querySelector('.slides-container');
faqslides.forEach(slide => {
slide.classList.remove('active');
});
faqActiveSlide.classList.add('active');
faqSlideContainer.classList.remove('active');
fadeInElement(faqActiveSlide);
if (window.innerWidth >= MOBILE_BREAKPOINT) {
gsap.to(faqContainer, {
xPercent: 0,
ease: 'power2',
duration: gsapAnimation,
});
} else {
faqContainer.style.transform = `translateX(0)`;
}
bindRiveFIles(nextPrevCta, 'White Arrow', 'Left & Right White');
}
});
};
setTimeout(() => {
if (
mainNavigation.style.top === `-${headerEleHeight}px` ||
!getfirsttab.getAttribute('aria-selected') === 'true'
) {
hideFixedHeader(parentElement);
}
}, 1000);
getStartedTabs.forEach((tab, index) => {
tab.addEventListener('click', e => {
e.preventDefault();
if (window.innerWidth < MOBILE_BREAKPOINT) {
setTimeout(() => {
tab.scrollIntoView({
behavior: 'smooth',
inline: 'center',
});
}, 100);
}
// Set tab to current index
tab.setAttribute('aria-selected', 'true');
currentIndex = index;
// switch page using tab
switchToSections(tab);
getStartedTabs.forEach((otherTab, otherTabIndex) => {
if (otherTabIndex !== currentIndex) {
otherTab.setAttribute('aria-selected', 'false');
}
});
// footer.classList.add('visually-hidden');
});
});
setTimeout(() => {
// eslint-disable-next-line no-param-reassign
document.body.style.marginTop = 0;
}, 600);
window.addEventListener('DOMContentLoaded', () => {
document.body.style.overflow = 'hidden';
window.scroll(0, 0);
setTimeout(() => {
// eslint-disable-next-line no-param-reassign
document.body.style.marginTop = 0;
}, 1000);
bindRiveFIles(nextPrevCta, 'White Arrow', 'Start');
});
if (footer) {
// footer.classList.add('visually-hidden');
footer.style.position = 'fixed';
footer.style.width = '100%';
footer.style.bottom = `-${footer.offsetHeight + 2}px`;
footer.style.transition = 'bottom 1s cubic-bezier(0.16, 1, 0.3, 1)';
getSections.style.transition = `top 1s cubic-bezier(0.16, 1, 0.3, 1)`;
footer.setAttribute('scroll-count', 0);
}
// switch to become coach tab
const switchToBecomeCoachTab = () => {
const nextSection = 1;
const closeVideo = introContent.querySelector('.close-video');
// make next tab active
if (getStartedTabs) {
getStartedTabs.forEach(otherTab => {
otherTab.setAttribute('aria-selected', 'false');
});
getStartedTabs[nextSection].setAttribute('aria-selected', 'true');
}
// switch to next section
gsap.to(getSections, {
duration: gsapAnimation,
ease: 'power2',
transform: `translateX(-${sectionWidth * nextSection}px)`,
});
gsap.to(introContentOverlay, {
x: window.innerWidth / 2,
ease: 'power1',
scrub: true,
yoyo: 'true',
});
fadeOutElement(introContentOverlayText1);
fadeOutElement(introContentOverlayText2);
fadeOutElement(introContentOverlayCta);
setTimeout(() => {
hideFixedHeader(getStartedSection);
hideSiteFooter();
}, slideTime);
nextPrevCta.classList.remove('right-cta');
skipPrev.classList.remove('hidden');
bindRiveFIles(nextPrevCta, 'Blue Arrow', 'Left & Right BLUE');
closeVideo.click();
};
const switchToCourseTab = () => {
const activeSection = 2;
const getAllSection = document.querySelectorAll('[data-page]');
const totalSlide = becomeCoachContent.querySelectorAll(
'.glide__slides > *'
);
if (!getAllSection) {
return;
}
const nxtslideContainer = getAllSection[activeSection].querySelector(
'.slides'
);
nxtslideContainer.querySelector('li:first-child').classList.add('active');
// make next tab active
if (getStartedTabs) {
getStartedTabs.forEach(otherTab => {
otherTab.setAttribute('aria-selected', 'false');
});
getStartedTabs[activeSection].setAttribute('aria-selected', 'true');
}
// switch to next section
gsap.to(getSections, {
duration: gsapAnimation,
ease: 'power2',
transform: `translateX(-${sectionWidth * activeSection}px)`,
});
gsap.to(becomeCoachContentOverlay, {
x: window.innerWidth / 2,
ease: 'none',
scrub: true,
yoyo: 'true',
});
fadeOutElement(totalSlide[totalSlide.length - 1]);
hideFixedHeader(getStartedSection);
hideSiteFooter();
bindRiveFIles(nextPrevCta, 'White Arrow', 'Left & Right WHITE');
};
const switchToNextTab = (sectionNo, contentOverlay, deskArrow, mobArrow) => {
const activeSection = sectionNo;
const sectionContainer = document.querySelector(
'.efl-get-started__sections'
);
const getAllSection = document.querySelectorAll('[data-page]');
const totalSlide = parentElement.querySelectorAll('.slides > *');
if (!getAllSection) {
return;
}
const nxtslideContainer = getAllSection[activeSection].querySelector(
'.slides'
);
nxtslideContainer.querySelector('li:first-child').classList.add('active');
// make next tab active
if (getStartedTabs) {
getStartedTabs.forEach(otherTab => {
otherTab.setAttribute('aria-selected', 'false');
});
getStartedTabs[activeSection].setAttribute('aria-selected', 'true');
}
// switch to next section
gsap.to(sectionContainer, {
duration: gsapAnimation,
ease: 'power2',
transform: `translateX(-${sectionWidth * activeSection}px)`,
});
gsap.to(contentOverlay, {
x: window.innerWidth / 2,
ease: 'power2',
scrub: true,
yoyo: 'true',
});
fadeOutElement(totalSlide[totalSlide.length - 1]);
hideFixedHeader(getStartedSection);
hideSiteFooter();
bindRiveFIles(nextPrevCta, deskArrow, mobArrow);
};
const switchToPreviousTab = (
sectionNo,
contentOverlay,
deskArrow,
mobArrow
) => {
const previousSection = sectionNo;
const prevcontentSlide = contentOverlay.querySelector('ul > li:last-child');
// make next tab active
getStartedTabs.forEach(otherTab => {
otherTab.setAttribute('aria-selected', 'false');
});
getStartedTabs[previousSection].setAttribute('aria-selected', 'true');
// switch to next section
gsap.to(getSections, {
duration: gsapAnimation,
ease: 'power2',
transform: `translateX(-${sectionWidth * previousSection}px)`,
});
gsap.to(contentOverlay, {
x: 0,
ease: 'none',
scrub: true,
yoyo: 'true',
});
if (sectionNo === 0) {
fadeInElement(introContentOverlayText1);
fadeInElement(introContentOverlayText2);
fadeInElement(introContentOverlayCta);
nextPrevCta.classList.add('right-cta');
skipPrev.classList.add('hidden');
showFixedHeader(getStartedSection);
} else {
setTimeout(() => {
fadeInElement(prevcontentSlide);
hideFixedHeader(getStartedSection);
}, 300);
}
hideSiteFooter();
bindRiveFIles(nextPrevCta, deskArrow, mobArrow);
};
// switch to next slide
const switchToNextGlideSlide = (element, slides, slideActive) => {
const totalSlide = element.querySelectorAll(`.${slides} > *`);
const slideContainer = element.querySelector(`.${slides}`);
let activeSlide = 0;
activeSlide = [...totalSlide].indexOf(
element.querySelector(`li.${slideActive}`)
);
activeSlide += 1;
// switch to sub pages
if (
window.innerWidth >= MOBILE_BREAKPOINT &&
activeSlide < totalSlide.length
) {
gsap.to(slideContainer, {
duration: gsapAnimation,
ease: 'power2',
transform: `translate3d(-${totalSlide[0].offsetWidth *
activeSlide}px, 0px, 0px)`,
});
fadeOutElement(totalSlide[activeSlide - 1]);
fadeInElement(totalSlide[activeSlide]);
} else if (activeSlide < totalSlide.length) {
const percentage =
((sectionWidth * activeSlide) / (sectionWidth * totalSlide.length)) *
100;
gsap.to(slideContainer, {
xPercent: -percentage,
ease: 'power2',
duration: gsapAnimation,
});
fadeOutElement(totalSlide[activeSlide - 1]);
fadeInElement(totalSlide[activeSlide]);
}
totalSlide.forEach(list => {
list.classList.remove(`${slideActive}`);
});
setTimeout(() => {
slideContainer
.querySelector(`li:nth-child(${activeSlide + 1})`)
.classList.add(`${slideActive}`);
element
.closest('.get-started-content')
.querySelector('.get-started-index-card-image')
.classList.add('active');
hideFixedHeader(getStartedSection);
hideSiteFooter();
}, 300);
};
const switchToNextSlide = (element, tab) => {
const totalSlide = element.querySelectorAll('.slides > *');
let activeSlide = 0;
const slideContainer = element.querySelector(`.slides`);
activeSlide = [...totalSlide].indexOf(element.querySelector('li.active'));
activeSlide += 1;
// switch to sub pages
if (activeSlide < totalSlide.length) {
const percentage =
((sectionWidth * activeSlide) / (sectionWidth * totalSlide.length)) *
100;
gsap.to(slideContainer, {
xPercent: -percentage,
ease: 'power2',
duration: gsapAnimation,
});
fadeOutElement(totalSlide[activeSlide - 1]);
fadeInElement(totalSlide[activeSlide]);
}
totalSlide.forEach(list => {
list.classList.remove('active');
});
element.querySelector('.slides-container').classList.add('slide-overlay');
setTimeout(() => {
slideContainer
.querySelector(`li:nth-child(${activeSlide + 1})`)
.classList.add('active');
element
.querySelector('.get-started-index-card-image')
.classList.add('active');
element.querySelector('.slides-container').classList.add('active');
hideFixedHeader(getStartedSection);
}, 300);
hideSiteFooter();
if (tab === 'faq') {
skipNext.classList.add('hidden');
bindRiveFIles(nextPrevCta, 'White Arrow', 'End');
}
};
const switchToPreviousGlideSlide = element => {
const totalSlide = element.querySelectorAll('.glide__slides > *');
let activeSlide = 0;
const slideContainer = element.querySelector(`.glide__slides`);
activeSlide = [...totalSlide].indexOf(
element.querySelector('li.glide__slide--active')
);
activeSlide -= 1;
// switch to sub pages
if (
window.innerWidth >= MOBILE_BREAKPOINT &&
activeSlide < totalSlide.length
) {
gsap.to(slideContainer, {
duration: gsapAnimation,
ease: 'power2',
transform: `translate3d(-${totalSlide[0].offsetWidth *
activeSlide}px, 0px, 0px)`,
});
fadeOutElement(totalSlide[activeSlide + 1]);
fadeInElement(totalSlide[activeSlide]);
} else if (activeSlide < totalSlide.length) {
const percentage =
((sectionWidth * activeSlide) / (sectionWidth * totalSlide.length)) *
100;
gsap.to(slideContainer, {
xPercent: -percentage,
ease: 'power2',
duration: gsapAnimation,
});
fadeOutElement(totalSlide[activeSlide + 1]);
fadeInElement(totalSlide[activeSlide]);
}
totalSlide.forEach(list => {
list.classList.remove('glide__slide--active');
});
setTimeout(() => {
slideContainer
.querySelector(`li:nth-child(${activeSlide + 1})`)
.classList.add('glide__slide--active');
hideFixedHeader(getStartedSection);
hideSiteFooter();
}, 300);
if (activeSlide === 0) {
setTimeout(() => {
element
.closest('.get-started-content')
.querySelector('.get-started-index-card-image')
.classList.remove('active');
}, 300);
}
};
const switchToPreviousSlide = (element, tab) => {
const totalSlide = element.querySelectorAll('.slides > *');
let activeSlide = 0;
const slideContainer = element.querySelector(`.slides`);
activeSlide = [...totalSlide].indexOf(element.querySelector('li.active'));
activeSlide -= 1;
// switch to sub pages
if (activeSlide < totalSlide.length) {
const percentage =
((sectionWidth * activeSlide) / (sectionWidth * totalSlide.length)) *
100;
gsap.to(slideContainer, {
xPercent: -percentage,
ease: 'power2',
duration: gsapAnimation,
});
fadeOutElement(totalSlide[activeSlide + 1]);
fadeInElement(totalSlide[activeSlide]);
}
totalSlide.forEach(list => {
list.classList.remove('active');
});
setTimeout(() => {
slideContainer
.querySelector(`li:nth-child(${activeSlide + 1})`)
.classList.add('active');
element.querySelector('.slides-container').classList.remove('active');
hideFixedHeader(getStartedSection);
}, 300);
setTimeout(() => {
element
.querySelector('.slides-container')
.classList.remove('slide-overlay');
}, 500);
hideSiteFooter();
if (activeSlide === 0) {
setTimeout(() => {
element
.querySelector('.get-started-index-card-image')
.classList.remove('active');
}, 300);
}
if (tab === 'faq') {
skipNext.classList.remove('hidden');
bindRiveFIles(nextPrevCta, 'White Arrow', 'Left & Right WHITE');
}
};
const skipNextClick = () => {
if (getActiveTabId(parentElement) === 'get-started-intro') {
switchToBecomeCoachTab();
} else if (getActiveTabId(parentElement) === 'get-started-become-coach') {
const coachLastslide = becomeCoachContent.querySelector(
'.glide__slides li:last-child'
);
if (coachLastslide.classList.contains('glide__slide--active')) {
// when reach last page in section
switchToCourseTab();
} else {
switchToNextGlideSlide(
becomeCoachContent,
'glide__slides',
'glide__slide--active'
);
}
} else if (getActiveTabId(parentElement) === 'get-started-courses') {
const courseLastslide = coursesContent.querySelector(
'.slides li:last-child'
);
const courseContentOverlay = coursesContent.querySelector(
'.get-started-courses__overlay'
);
if (courseLastslide.classList.contains('active')) {
// when reach last page in section
switchToNextTab(
3,
courseContentOverlay,
'Blue Arrow',
'Left & Right BLUE'
);
} else {
switchToNextSlide(coursesContent, 'courses');
}
} else if (getActiveTabId(parentElement) === 'get-started-learning') {
const learningLastslide = learningContent.querySelector(
'.slides li:last-child'
);
if (learningLastslide.classList.contains('active')) {
// when reach last page in section
switchToNextTab(
4,
learningContentOverlay,
'White Arrow',
'Left & Right WHITE'
);
} else {
switchToNextSlide(learningContent, 'learning');
}
} else if (getActiveTabId(parentElement) === 'get-started-faq') {
switchToNextSlide(faqContent, 'faq');
}
};
const skipPrevClick = () => {
if (getActiveTabId(getStartedSection) === 'get-started-become-coach') {
const coachFirstslide = becomeCoachContent.querySelector(
'.glide__slides li:first-child'
);
if (coachFirstslide.classList.contains('glide__slide--active')) {
// when reach first page in section
switchToPreviousTab(0, introContentOverlay, 'White Arrow', 'Start');
} else {
switchToPreviousGlideSlide(becomeCoachContent);
}
} else if (getActiveTabId(parentElement) === 'get-started-courses') {
const coursesFirstslide = coursesContent.querySelector(
'.slides li:first-child'
);
if (coursesFirstslide.classList.contains('active')) {
// when reach first page in section
switchToPreviousTab(
1,
becomeCoachContentOverlay,
'Blue Arrow',
'Left & Right BLUE'
);
} else {
switchToPreviousSlide(coursesContent, 'courses');
}
} else if (getActiveTabId(parentElement) === 'get-started-learning') {
const learningFirstslide = learningContent.querySelector(
'.slides li:first-child'
);
if (learningFirstslide.classList.contains('active')) {
// when reach first page in section
switchToPreviousTab(
2,
coursesContentOverlay,
'White Arrow',
'Left & Right WHITE'
);
} else {
switchToPreviousSlide(learningContent, 'learning');
}
} else if (getActiveTabId(parentElement) === 'get-started-faq') {
const faqFirstslide = faqContent.querySelector('.slides li:first-child');
if (faqFirstslide.classList.contains('active')) {
// when reach first page in section
switchToPreviousTab(
3,
learningContentOverlay,
'Blue Arrow',
'Left & Right BLUE'
);
} else {
switchToPreviousSlide(faqContent, 'faq');
}
}
};
skipNext.addEventListener('click', () => {
skipNextClick();
});
skipPrev.addEventListener('click', () => {
skipPrevClick();
});
// eslint-disable-next-line complexity
parentElement.addEventListener('wheel', e => {
// eslint-disable-next-line Missing radix parameter
let scrollCount = parseInt(footer.getAttribute('scroll-count'), 10);
if (!e.target.closest('.accordion')) {
if (!scrollingScreen && e.deltaY > 0) {
scrollingScreen = true;
hideFixedHeader(parentElement);
if (scrollCount < 2) {
scrollCount += 1;
footer.setAttribute('scroll-count', scrollCount);
}
if (scrollCount === 2) {
showSiteFooter();
}
setTimeout(() => {
scrollingScreen = false;
}, animationTime);
} else if (!scrollingScreen && e.deltaY < 0) {
scrollingScreen = true;
showFixedHeader(parentElement);
if (scrollCount > 0) {
scrollCount -= 1;
footer.setAttribute('scroll-count', scrollCount);
}
if (scrollCount < 2) {
hideSiteFooter();
}
setTimeout(() => {
scrollingScreen = false;
}, animationTime);
}
}
});
// mobile swipe functionality
function getTouches(evt) {
return (
evt.touches || evt.originalEvent.touches // browser API
);
}
function handleTouchStart(evt) {
const firstTouch = getTouches(evt)[0];
xDown = firstTouch.clientX;
yDown = firstTouch.clientY;
}
// eslint-disable-next-line complexity
function handleTouchMove(evt) {
if (!xDown || !yDown) {
return;
}
const xUp = evt.touches[0].clientX;
const yUp = evt.touches[0].clientY;
const xDiff = xDown - xUp;
const yDiff = yDown - yUp;
// eslint-disable-next-line Missing radix parameter
let scrollCount = parseInt(footer.getAttribute('scroll-count'), 10);
if (Math.abs(xDiff) < Math.abs(yDiff)) {
/* most significant */
if (!scrollingScreen && yDiff > 0) {
/* down swipe */
scrollingScreen = true;
hideFixedHeader(parentElement);
if (scrollCount < 2) {
scrollCount += 1;
footer.setAttribute('scroll-count', scrollCount);
}
if (scrollCount === 2) {
showSiteFooter();
}
setTimeout(() => {
scrollingScreen = false;
}, animationTime);
} else if (!scrollingScreen) {
scrollingScreen = true;
showFixedHeader(parentElement);
if (scrollCount > 0) {
scrollCount -= 1;
footer.setAttribute('scroll-count', scrollCount);
}
if (scrollCount < 2) {
hideSiteFooter();
}
setTimeout(() => {
scrollingScreen = false;
}, animationTime);
}
} else if (xDiff > 0 && !evt.target.closest('.get-started-navigation')) {
/* right swipe */
skipNextClick();
} else if (xDiff < 0 && !evt.target.closest('.get-started-navigation')) {
skipPrevClick();
}
xDown = null;
yDown = null;
}
parentElement.addEventListener('touchstart', handleTouchStart, false);
parentElement.addEventListener('touchmove', handleTouchMove, false);
};
.efl-get-started {
position: relative;
height: 100vh;
overflow-y: hidden;
overflow-x: hidden !important;
margin-top: 114px;
max-width: 100vw;
display: flex;
flex-direction: column;
&__sections {
width: calc(100% * 5);
position: relative;
transition: top 3s cubic-bezier(0.16, 1, 0.3, 1),
margin-top 3s cubic-bezier(0.16, 1, 0.3, 1);
display: flex;
flex-wrap: nowrap;
.get-started-intro h2 {
margin-top: -105px;
}
}
.get-started-next-prev-cta {
display: flex;
position: absolute;
top: calc(100vh - 105px - 40px - 16px);
width: 100%;
height: 4rem;
flex-direction: row;
justify-content: space-between;
z-index: 99999999;
transition: top 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.prev-step,
.next-step {
display: none;
}
.mobile-swipe {
display: flex;
position: relative;
bottom: 0;
margin: 0 auto;
width: 15rem;
height: 4rem;
z-index: 9;
cursor: pointer;
}
&.nav-hidden {
.get-started-next-prev-cta {
top: calc(100vh - 40px - 16px);
}
.efl-get-started__section {
.get-started-intro h2 {
margin-top: 0;
}
}
}
.get-started-index-card-image {
transition: filter 5s cubic-bezier(0.16, 1, 0.3, 1);
&.active {
filter: blur(10px);
}
}
@media screen and (min-width: 768px) {
&__sections {
.get-started-intro h2 {
margin-top: 0;
}
}
.get-started-next-prev-cta {
top: calc(100vh - 114px - 32px - 60px);
height: 3.2rem;
&.right-cta {
justify-content: right;
}
}
.prev-step {
display: flex;
position: relative;
bottom: 0;
left: 6rem;
width: 15.8rem;
height: 3.2rem;
z-index: 9;
cursor: pointer;
}
.next-step {
display: flex;
position: relative;
bottom: 0;
right: 6rem;
width: 15.8rem;
height: 3.2rem;
z-index: 9;
cursor: pointer;
}
.mobile-swipe {
display: none;
}
&.nav-hidden {
.get-started-next-prev-cta {
top: calc(100vh - 32px - 60px);
}
}
}
}
<div class="efl-get-started" data-behaviour="efl-get-started">
{{render '@get-started-navigation'}}
<div class="get-started-next-prev-cta right-cta">
<canvas class="prev-step hidden" width="158" height="32"></canvas>
<canvas class="next-step" width="158" height="32"></canvas>
<canvas class="mobile-swipe" width="208" height="56"></canvas>
</div>
<div class="efl-get-started__sections">
{{render '@get-started-intro'}}
{{render '@get-started-become-coach'}}
{{render '@get-started-courses'}}
{{render '@get-started-learning'}}
{{render '@get-started-faq'}}
</div>
</div>