This component was inspired by the scroll-controlled animations featured on Apple's Airpod Pro product page. The component incorporates the library by MrMarble over at CSS Script. The module in HubSpot CMS was configured so that non-technical authors could easily add this component to a page by providing the URL of the first frame of the frame-to-frame animation and the total number of frames. The script managed the rest.
This component was developed as part of a refresh of the homepage and an initiative to improve performance and SEO based on recommendations from a consultancy. Replacing the Slick carousel with a vanilla JS alternative reduced the amount of code and markup required to provide the same functionality. The carousel rotates through the slides based as set time intervals. Clicking the arrows will change to the next or previous slide in the sequence. Clicks on the dots will switch to the associated slide.