Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                    <div class="preloader">
            <svg version="1.1" id="preloader-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 283.46 283.46" xml:space="preserve">
       <path fill="#242424" d="M140.409,2.871c-64.504,0-100.58,20.399-100.58,20.399v151.193c0,0,1.605,63.022,102.091,107.321
           c100.485-44.299,101.712-107.321,101.712-107.321V23.271C243.632,23.271,204.911,2.871,140.409,2.871z"/>
       <path fill="#FFFFFF" d="M140.483,7.036c-60.86,0-94.898,19.247-94.898,19.247v147.561c0,0,1.515,59.463,96.324,101.26
           c94.809-41.797,95.969-101.26,95.969-101.26V26.283C237.878,26.283,201.343,7.036,140.483,7.036z"/>
       <path fill="#FFFFFF" d="M140.483,7.036c-60.86,0-94.898,19.247-94.898,19.247v147.561c0,0,1.515,59.463,96.324,101.26
           c94.809-41.797,95.969-101.26,95.969-101.26V26.283C237.878,26.283,201.343,7.036,140.483,7.036z"/>
       <path fill="none" stroke="#242424" stroke-width="11" stroke-miterlimit="10" d="M141.859,273.879
           c0,0-27.193-11.364-54.037-32.36c-39.5-32.145-42.339-69.321-42.339-69.321V29.74c0,0,38.133-18.772,96.346-18.957
           c53.692-0.17,96.154,18.957,96.154,18.957v142.458c0,0-1.083,9.056-7.512,23.083c-8.366,18.252-20.692,34.663-36.742,46.712
           C164.717,263.772,141.859,273.879,141.859,273.879z"/>
       <path id="loader-fill" fill="none" stroke="#F9F9F9" stroke-width="10" stroke-miterlimit="10" d="M141.859,273.879
           c0,0-27.193-11.364-54.037-32.36c-39.5-32.145-42.339-69.321-42.339-69.321V29.74c0,0,38.133-18.772,96.346-18.957
           c53.692-0.17,96.154,18.957,96.154,18.957v142.458c0,0-1.083,9.056-7.512,23.083c-8.366,18.252-20.692,34.663-36.742,46.712
           C164.717,263.772,141.859,273.879,141.859,273.879z"/>
       <path fill="#242424" d="M140.412,2.87c-64.51,0-100.58,20.4-100.58,20.4v151.19c0,0,1.6,63.03,102.09,107.32
           c100.48-44.29,101.71-107.32,101.71-107.32V23.27C243.632,23.27,204.912,2.87,140.412,2.87z M237.882,173.84
           c0,0-1.16,59.47-95.97,101.26c-94.81-41.79-96.33-101.26-96.33-101.26V26.28c0,0,34.04-19.24,94.9-19.24s97.4,19.24,97.4,19.24
           V173.84z"/>
       <path fill="#242424" d="M140.388,120.478c50.314,0,83.591,13.096,92.613,17.112V32.105c0,0-34.682-18.271-92.454-18.271
           c-57.773,0-90.085,18.271-90.085,18.271v105.294C59.498,133.182,90.823,120.478,140.388,120.478z"/>
       <polygon fill="#FFFFFF" points="116.122,26.661 143.166,26.661 143.166,34.375 134.585,34.375 134.585,99.647 155.907,99.647 
           155.907,81.704 167.091,81.704 167.091,108.229 116.122,108.229 116.122,100.427 123.923,100.427 123.923,34.375 116.122,34.375 "/>
       <path fill="#FFFFFF" d="M63.296,92.886l10.438-3.12l-0.26,12.481c1.041,7.802,11.814,4.421,11.814,4.421
           c11.555-2.08,10.811-9.621,10.811-9.621l-0.261-12.742c-0.03-7.867-6.501-7.021-6.501-7.021H70.354
           c-7.281-1.301-7.056-9.839-7.056-9.839l0.034-19.547c0,0-1.82-13.002,20.804-17.163c22.624-4.16,23.145,9.362,23.145,9.362v13.695
           l-12.049,1.561l0.346-9.015c0,0,1.978-10.424-9.881-7.802c-12.071,2.67-11.182,8.842-11.182,8.842L73.994,60.64
           c0.26,7.542,5.981,6.76,5.981,6.76l15.862,0.045c11.183-0.736,11.442,7.759,11.442,7.759v22.884
           c-3.121,19.243-36.146,18.203-36.146,18.203c-7.021-1.3-7.838-8.062-7.838-8.062L63.296,92.886L63.296,92.886z"/>
       <path fill="#FFFFFF" d="M209.218,60.12V48.418c0,0,1.568-7.855-11.441-9.882c-10.018-1.56-9.623,4.941-9.623,4.941l-0.002,14.043
           c0,0-0.777,5.461,7.283,7.802c0,0,25.744,7.021,25.484,20.283l0.002,20.544c0,0,1.559,9.381-10.662,10.151
           c0,0-27.826-0.01-32.768-14.313V83.784l10.143,2.08v13.003c0,0-0.453,6.501,11.605,7.801c0,0,9.818,1.895,10.498-5.461l0.26-15.082
           c0,0-0.26-5.461-6.5-7.281l-14.043-5.724c0,0-13.002-2.078-13.262-15.08l0.52-18.532c0,0,1.301-11.403,16.123-9.568
           c0,0,24.703,0.795,26.785,17.958l-0.198,14.62L209.218,60.12z"/>
       <path fill="#242424" d="M105.185,160.909c0,0,14.073-26.468,40.424-34.767c-1.721-0.031-3.458-0.051-5.221-0.051
           c-49.564,0-80.89,12.703-89.926,16.921v29.169c0,0,0.534,20.857,21.164,46.125L105.185,160.909z"/>
       <path fill="#242424" d="M186.689,129.965c21.604,13.923,7.55,47.785,7.55,47.785l-51.974,90.39
           C231.897,228.472,233,172.182,233,172.182v-28.979C227.141,140.594,211.038,134.158,186.689,129.965z"/>
       <path fill="#242424" d="M176.192,129.813c-42.191-12.223-65.271,31.205-65.271,31.205l-35.907,61.413
           c13.059,14.683,33.037,30.515,63.561,44.432l52.181-90.748C190.755,176.114,206.351,138.549,176.192,129.813z"/>
       <polygon fill="#FFFFFF" points="132.497,176.709 149.716,188.448 150.071,191.436 148.79,191.436 148.15,189.302 142.885,185.673 
           137.833,187.736 130.931,182.898 135.13,180.977 129.865,177.42 "/>
       <path fill="#FFFFFF" d="M103.414,184.709c-2.554,5.933-8.928,8.889-14.237,6.604c-5.311-2.286-7.545-8.947-4.991-14.88
           s8.929-8.89,14.237-6.604C103.733,172.114,105.968,178.776,103.414,184.709z"/>
       <path fill="#231F20" d="M101.931,185.134c-1.342,3.117-4.009,4.964-5.957,4.125c-1.949-0.839-2.441-4.046-1.1-7.163
           s4.01-4.964,5.958-4.125C102.78,178.809,103.272,182.016,101.931,185.134z"/>
       <path fill="#FFFFFF" d="M100.937,179.836c0,0,13.469,10.432,25.881,8.055c0,0,6.734-1.624,6.206,3.546
           c-0.528,5.169,9.442,14.986,14.593,17.231l2.455,1.935l-4.504,6.339l-1.655,0.599l-47.729-31.315
           C96.183,186.224,95.919,180.893,100.937,179.836z"/>
       <path fill="#FFFFFF" d="M160.688,221.27c-2.873,6.674-9.443,8.773-11.293,8.214c-1.822-0.553-5.405-1.98-6.193-3.863
           c-1.313-3.14-1.207-7.453,0.589-11.625c2.872-6.674,9.302-8.954,11.019-8.412c1.805,0.57,5.662,2.16,6.453,4.027
           C162.589,212.753,162.491,217.083,160.688,221.27z"/>
       <path fill="#231F20" d="M158.86,221.116c-1.203,2.792-2.943,4.726-3.889,4.318c-0.945-0.407-0.738-3.001,0.463-5.793
           c1.201-2.792,2.943-4.726,3.889-4.318C160.269,215.73,160.061,218.324,158.86,221.116z"/>
       </svg>
    </div>
    <div class="content">
        <nav>
            <div class="align-left">
                <button class="menu-btn">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
                </button>
                <div class="menu">
                    <button class="menu-close-btn"></button>
                    <ul>
                        <li><a href="#" class="menu-link">HOME</a></li>
                        <li><a href="#" class="menu-link">THE RIDERS</a></li>
                        <li><a href="#" class="menu-link">9 CLUB</a></li>
                        <li><a href="#" class="menu-link">HALL OF FAME</a></li>
                        <li><a href="#" class="menu-link">ABOUT</a></li>
                        <li><a href="#" class="menu-link">CONTACT</a></li>
                    </ul>
                </div>
            </div>
            <div class="center">
                <svg class="logo">
                    <use xlink:href="#logo"/>
                </svg>
            </div>
            <div class="align-right">
                <button class="search-open-btn" aria-label="Open Search" aria-pressed="false"></button>
                <div class="search-form-container">
                    <form>
                        <input type="text" placeholder="Search" class="search-input">
                    </form>
                    <button class="search-close-btn" aria-label="Close Search" aria-pressed="false"></button>
                </div>
            </div>
        </nav>
        <main>    
            <div class="rider-info">
                <!-- <h2 class="title">HALL OF FAME</h2> -->
                <h3 class="rider-name">Nyjah Huston</h3>   
                <ul class="rider-stats">
                    <li>
                        <span class="stat-1">
                            40 x
                        </span>
                        <svg class="svg-stats">
                            <use xlink:href="#score"/>
                        </svg>
                    </li>
                    <li>
                        <span class="stat-2">
                            24 x
                        </span>
                        <svg class="svg-stats">
                            <use xlink:href="#gold"/>
                        </svg>
                    </li>
                    <li>
                        <span class="stat-3">
                            7 x
                        </span>
                        <svg class="svg-stats">
                            <use xlink:href="#silver"/>
                        </svg>
                    </li>
                    <li>
                        <span class="stat-4">
                            2 x
                        </span>
                        <svg class="svg-stats">
                            <use xlink:href="#bronze"/>
                        </svg>
                    </li>
                </ul>
                <h2 class="title">BEST TRICK</h2>
                <h4 class="rider-trick">
                    Backside 270 Noseblunt
                </h4>
            </div>
            <div class="rider">
                <img class="rider-img" src="https://kasperdebruyne.be/img/sls/1.jpg"/>
                <img class="rider-img" src="https://kasperdebruyne.be/img/sls/2.jpg"/> 
                <img class="rider-img" src="https://kasperdebruyne.be/img/sls/3.jpg"/> 
                <img class="rider-img" src="https://kasperdebruyne.be/img/sls/4.jpg"/> 
                <canvas id="canvas"></canvas>   
            </div>
        </main>
        <div class="rider-trick-video-container">
            <button class="close-video"></button>
       
            <iframe class="rider-trick-video" width="100%" height="100%" src="https://www.youtube.com/embed/j9ckem2DsNQ" 
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
            allowfullscreen></iframe>
           
        </div>
        <div class="pagination-container">
            <button class="pagination active"></button>
            <button class="pagination"></button>
            <button class="pagination"></button>
            <button class="pagination"></button>
        </div>
    </div>
    <svg style="display:none">
        <symbol id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        viewBox="0 0 283.46 283.46" xml:space="preserve">
       <path fill="#242424" d="M140.409,2.871c-64.504,0-100.58,20.399-100.58,20.399v151.193c0,0,1.605,63.022,102.091,107.321
           c100.485-44.299,101.712-107.321,101.712-107.321V23.271C243.632,23.271,204.911,2.871,140.409,2.871z"/>
       <path fill="#FFFFFF" d="M140.483,7.036c-60.86,0-94.898,19.247-94.898,19.247v147.561c0,0,1.515,59.463,96.324,101.26
           c94.809-41.797,95.969-101.26,95.969-101.26V26.283C237.878,26.283,201.343,7.036,140.483,7.036z"/>
       <path fill="#242424" d="M140.388,120.478c50.314,0,83.591,13.096,92.613,17.112V32.105c0,0-34.682-18.271-92.454-18.271
           c-57.773,0-90.085,18.271-90.085,18.271v105.294C59.498,133.182,90.823,120.478,140.388,120.478z"/>
       <polygon fill="#FFFFFF" points="116.122,26.661 143.166,26.661 143.166,34.375 134.585,34.375 134.585,99.647 155.907,99.647 
           155.907,81.704 167.091,81.704 167.091,108.229 116.122,108.229 116.122,100.427 123.923,100.427 123.923,34.375 116.122,34.375 "/>
       <path fill="#FFFFFF" d="M63.296,92.886l10.438-3.12l-0.26,12.481c1.041,7.802,11.814,4.421,11.814,4.421
           c11.555-2.08,10.811-9.621,10.811-9.621l-0.261-12.742c-0.03-7.867-6.501-7.021-6.501-7.021H70.354
           c-7.281-1.301-7.056-9.839-7.056-9.839l0.034-19.547c0,0-1.82-13.002,20.804-17.163c22.624-4.16,23.145,9.362,23.145,9.362v13.695
           l-12.049,1.561l0.346-9.015c0,0,1.978-10.424-9.881-7.802c-12.071,2.67-11.182,8.842-11.182,8.842L73.994,60.64
           c0.26,7.542,5.981,6.76,5.981,6.76l15.862,0.045c11.183-0.736,11.442,7.759,11.442,7.759v22.884
           c-3.121,19.243-36.146,18.203-36.146,18.203c-7.021-1.3-7.838-8.062-7.838-8.062V92.886z"/>
       <path fill="#FFFFFF" d="M209.218,60.12V48.418c0,0,1.568-7.855-11.441-9.882c-10.018-1.56-9.623,4.941-9.623,4.941l-0.002,14.043
           c0,0-0.777,5.461,7.283,7.802c0,0,25.744,7.021,25.484,20.283l0.002,20.544c0,0,1.559,9.381-10.662,10.151
           c0,0-27.826-0.01-32.768-14.313V83.784l10.143,2.08v13.003c0,0-0.453,6.501,11.605,7.801c0,0,9.818,1.895,10.498-5.461l0.26-15.082
           c0,0-0.26-5.461-6.5-7.281l-14.043-5.724c0,0-13.002-2.078-13.262-15.08l0.52-18.532c0,0,1.301-11.403,16.123-9.568
           c0,0,24.703,0.795,26.785,17.958l-0.198,14.62L209.218,60.12z"/>
       <path fill="#242424" d="M105.185,160.909c0,0,14.073-26.468,40.424-34.767c-1.721-0.031-3.458-0.051-5.221-0.051
           c-49.564,0-80.89,12.703-89.926,16.921v29.169c0,0,0.534,20.857,21.164,46.125L105.185,160.909z"/>
       <path fill="#242424" d="M186.689,129.965c21.604,13.923,7.55,47.785,7.55,47.785l-51.974,90.39
           c89.632-39.668,90.735-95.958,90.735-95.958v-28.979C227.141,140.594,211.038,134.158,186.689,129.965z"/>
       <path fill="#242424" d="M176.192,129.813c-42.191-12.223-65.271,31.205-65.271,31.205l-35.907,61.413
           c13.059,14.683,33.037,30.515,63.561,44.432l52.181-90.748C190.755,176.114,206.351,138.549,176.192,129.813z"/>
       <polygon fill="#FFFFFF" points="132.497,176.709 149.716,188.448 150.071,191.436 148.79,191.436 148.15,189.302 142.885,185.673 
           137.833,187.736 130.931,182.898 135.13,180.977 129.865,177.42 "/>
       <path fill="#FFFFFF" d="M103.414,184.709c-2.554,5.933-8.928,8.889-14.237,6.604c-5.311-2.286-7.545-8.947-4.991-14.88
           c2.554-5.933,8.929-8.89,14.237-6.604C103.733,172.114,105.968,178.776,103.414,184.709z"/>
       <path fill="#231F20" d="M101.931,185.134c-1.342,3.117-4.009,4.964-5.957,4.125c-1.949-0.839-2.441-4.046-1.1-7.163
           s4.01-4.964,5.958-4.125C102.78,178.809,103.272,182.016,101.931,185.134z"/>
       <path fill="#FFFFFF" d="M100.937,179.836c0,0,13.469,10.432,25.881,8.055c0,0,6.734-1.624,6.206,3.546
           c-0.528,5.169,9.442,14.986,14.593,17.231l2.455,1.935l-4.504,6.339l-1.655,0.599l-47.729-31.315
           C96.183,186.224,95.919,180.893,100.937,179.836z"/>
       <path fill="#FFFFFF" d="M160.688,221.27c-2.873,6.674-9.443,8.773-11.293,8.214c-1.822-0.553-5.405-1.98-6.193-3.863
           c-1.313-3.14-1.207-7.453,0.589-11.625c2.872-6.674,9.302-8.954,11.019-8.412c1.805,0.57,5.662,2.16,6.453,4.027
           C162.589,212.753,162.491,217.083,160.688,221.27z"/>
       <path fill="#231F20" d="M158.86,221.116c-1.203,2.792-2.943,4.726-3.889,4.318c-0.945-0.407-0.738-3.001,0.463-5.793
           c1.201-2.792,2.943-4.726,3.889-4.318C160.269,215.73,160.061,218.324,158.86,221.116z"/>
       </symbol>
       <symbol id="gold" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 31.361 42.915" xml:space="preserve">
        <g transform="translate(105 70)">
            <path fill="#242424" d="M-89.525-70C-99.45-70-105-66.861-105-66.861v23.263c0,0,0.247,9.7,15.708,16.513
                c15.467-6.817,15.653-16.513,15.653-16.513v-23.263C-73.639-66.861-79.596-70-89.525-70z"/>
            <path fill="#FFFFFF" d="M-89.509-69.166c-9.364,0-14.6,2.962-14.6,2.962v22.7c0,0,0.233,9.149,14.821,15.58
                c14.587-6.431,14.766-15.58,14.766-15.58v-22.7C-74.522-66.204-80.145-69.166-89.509-69.166z"/>
            <path fill="#242424" d="M-89.497-68.112c-8.8,0-13.718,2.8-13.718,2.8v21.438c0,0,0.219,8.64,13.924,14.713
                c13.7-6.073,13.873-14.713,13.873-14.713v-21.441C-75.418-65.315-80.7-68.112-89.497-68.112z"/>
            <g transform="translate(1)">
                <g  transform="translate(68.45 192.576)">
                    <path id="Path_35" fill="#FFFFFF" d="M-165.668-233.915v-1.385h1.389v-15.9h-1.386v-1.377h3.461v17.277h1.378v1.384
                    L-165.668-233.915z"/>
                </g>
            <path fill="#FFFFFF" d="M-86.907-48.189c-0.247,0.191-0.646,0.287-1.197,0.287c-0.56,0-0.951-0.089-1.176-0.266
                c-0.224-0.177-0.336-0.49-0.336-0.938v-0.504h0.519v0.532c0,0.225,0.059,0.404,0.176,0.539c0.117,0.136,0.388,0.203,0.811,0.203
                s0.707-0.07,0.853-0.211c0.146-0.14,0.219-0.332,0.219-0.575v-1.164c0-0.112-0.026-0.22-0.077-0.323
                c-0.052-0.103-0.158-0.173-0.317-0.21l-1.579-0.337c-0.383-0.084-0.574-0.389-0.574-0.912v-1.095
                c0-0.393,0.109-0.701,0.329-0.926c0.219-0.225,0.604-0.337,1.154-0.337c0.569,0,0.969,0.111,1.197,0.336
                c0.229,0.224,0.343,0.527,0.343,0.91v0.672h-0.518v-0.714c0-0.112-0.012-0.215-0.035-0.309c-0.023-0.093-0.073-0.175-0.148-0.245
                c-0.075-0.069-0.178-0.123-0.31-0.16c-0.132-0.038-0.311-0.057-0.536-0.057c-0.207,0-0.373,0.017-0.5,0.05
                c-0.127,0.032-0.226,0.081-0.296,0.146c-0.071,0.066-0.12,0.147-0.148,0.246c-0.028,0.098-0.042,0.208-0.042,0.329v0.927
                c0,0.215,0.016,0.372,0.049,0.47c0.033,0.099,0.152,0.171,0.359,0.218l1.309,0.267c0.272,0.057,0.481,0.159,0.627,0.309
                s0.218,0.332,0.218,0.547v1.319C-86.536-48.706-86.66-48.381-86.907-48.189z"/>
            <path fill="#FFFFFF" d="M-84.632-53.936v5.544h0.644V-48h-1.162v-5.936h-0.588v-0.393h0.588v-2.534l0.519-0.237v2.771h0.658
                v0.393H-84.632z"/>
            </g>
        </g>
        </symbol>
        <symbol id="silver" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 31.361 42.915" xml:space="preserve">
        <g transform="translate(-554.222 -373)">
            <path fill="#242424" d="M569.697,373c-9.925,0-15.475,3.139-15.475,3.139v23.263c0,0,0.247,9.7,15.708,16.513
                c15.467-6.817,15.653-16.513,15.653-16.513v-23.263C585.583,376.139,579.626,373,569.697,373z"/>
            <path fill="#FFFFFF" d="M569.713,373.834c-9.364,0-14.6,2.962-14.6,2.962v22.7c0,0,0.233,9.149,14.821,15.58
                c14.587-6.431,14.766-15.58,14.766-15.58v-22.7C584.7,376.796,579.077,373.834,569.713,373.834z"/>
            <path fill="#242424" d="M569.725,374.888c-8.8,0-13.718,2.8-13.718,2.8v21.438c0,0,0.219,8.64,13.924,14.713
                c13.7-6.073,13.873-14.713,13.873-14.713v-21.441C583.804,377.685,578.522,374.888,569.725,374.888z"/>
            <g transform="translate(69 0.086)">
                <path fill="#FFFFFF" d="M503.678,395v-0.392h0.546v-4.83c0-0.215-0.044-0.39-0.131-0.525c-0.088-0.135-0.265-0.203-0.531-0.203
                c-0.358,0-0.648,0.096-0.869,0.287s-0.331,0.483-0.331,0.875v4.396h0.546V395h-1.651v-0.392h0.588v-5.544h-0.588v-0.393h1.105
                l-0.014,0.63c0.131-0.187,0.306-0.354,0.525-0.504c0.219-0.149,0.492-0.224,0.818-0.224c0.354,0,0.618,0.086,0.791,0.259
                s0.259,0.45,0.259,0.833v4.942h0.589V395H503.678z"/>
                <path fill="#FFFFFF" d="M508.354,395v-0.63c-0.121,0.187-0.299,0.354-0.536,0.504c-0.236,0.149-0.521,0.224-0.855,0.224
                c-0.325,0-0.571-0.076-0.738-0.23s-0.25-0.441-0.25-0.861v-4.34c0-0.354,0.069-0.625,0.209-0.813
                c0.139-0.187,0.398-0.279,0.779-0.279c0.306,0,0.577,0.069,0.813,0.21c0.237,0.14,0.43,0.313,0.578,0.518v-4.13h-0.588v-0.392
                h1.105v9.828h0.673V395H508.354z M508.354,390.212c0-0.354-0.112-0.637-0.338-0.847s-0.531-0.315-0.917-0.315
                c-0.239,0-0.4,0.045-0.483,0.133c-0.082,0.089-0.124,0.273-0.124,0.554v4.199c0,0.215,0.028,0.383,0.083,0.505
                c0.055,0.121,0.229,0.182,0.524,0.182c0.349,0,0.646-0.091,0.89-0.273c0.243-0.182,0.365-0.445,0.365-0.791V390.212z"/>
            </g>
            <g transform="translate(115.607 191.008)">
                <path fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M445.682,210.185v-0.742
                c0.383-0.637,0.783-1.354,1.2-2.151c0.367-0.686,0.781-1.495,1.244-2.428c0.463-0.933,0.933-1.973,1.411-3.12
                c0.233-0.531,0.436-1.073,0.61-1.626c0.15-0.489,0.266-0.989,0.347-1.494c0.079-0.502,0.135-1.024,0.167-1.566
                s0.048-1.156,0.048-1.841c0.045-0.512-0.091-1.024-0.385-1.446c-0.422-0.351-0.971-0.511-1.516-0.443
                c-0.492-0.053-0.983,0.108-1.348,0.443c-0.295,0.422-0.431,0.934-0.386,1.446v2.128h-0.932v-1.985
                c-0.06-0.762,0.143-1.521,0.574-2.151c0.557-0.528,1.319-0.782,2.081-0.694c1.302-0.249,2.559,0.605,2.808,1.907
                c0.059,0.31,0.057,0.629-0.008,0.939c0,0.607-0.012,1.161-0.036,1.662c-0.024,0.509-0.08,1.017-0.167,1.519
                c-0.098,0.553-0.226,1.099-0.383,1.638c-0.201,0.678-0.437,1.346-0.706,2c-0.287,0.717-0.633,1.491-1.04,2.32
                s-0.793,1.602-1.16,2.319c-0.605,1.189-1.255,2.381-1.539,2.929h4.731v-2.883h0.443v3.326L445.682,210.185z"/>
            </g>
        </g>
        <symbol/>
        <symbol id="bronze" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 31.361 42.915" xml:space="preserve">
        <g transform="translate(-621.222 -373)">
            <path fill="#242424" d="M636.697,373c-9.925,0-15.475,3.139-15.475,3.139v23.263c0,0,0.247,9.7,15.708,16.513
                c15.467-6.817,15.653-16.513,15.653-16.513v-23.263C652.583,376.139,646.626,373,636.697,373z"/>
            <path fill="#FFFFFF" d="M636.713,373.834c-9.364,0-14.6,2.962-14.6,2.962v22.7c0,0,0.233,9.149,14.821,15.58
                c14.587-6.431,14.766-15.58,14.766-15.58v-22.7C651.7,376.796,646.077,373.834,636.713,373.834z"/>
            <path fill="#242424" d="M636.725,374.888c-8.8,0-13.718,2.8-13.718,2.8v21.438c0,0,0.219,8.64,13.924,14.713
                c13.7-6.073,13.873-14.713,13.873-14.713v-21.441C650.804,377.685,645.522,374.888,636.725,374.888z"/>
            <path fill="#FFFFFF" d="M640.14,390.228v-0.405c0-0.252-0.051-0.43-0.151-0.532c-0.102-0.103-0.271-0.154-0.51-0.154
            c-0.341,0-0.611,0.107-0.813,0.322s-0.304,0.472-0.304,0.77v4.467h0.546v0.392h-1.651v-0.392h0.588v-5.544h-0.588v-0.393h1.105
            l-0.014,0.616c0.364-0.477,0.803-0.714,1.316-0.714c0.373,0,0.632,0.096,0.776,0.287s0.217,0.46,0.217,0.805v0.476H640.14z"/>
            <path fill="#FFFFFF" d="M643.57,395.086v-0.63c-0.12,0.187-0.299,0.354-0.535,0.504c-0.237,0.149-0.522,0.224-0.856,0.224
            c-0.324,0-0.57-0.076-0.737-0.23s-0.251-0.441-0.251-0.861v-4.34c0-0.354,0.07-0.625,0.209-0.813
            c0.14-0.187,0.399-0.279,0.779-0.279c0.307,0,0.578,0.069,0.814,0.21c0.236,0.14,0.429,0.313,0.577,0.518v-4.13h-0.588v-0.392
            h1.106v9.828h0.672v0.392H643.57z M643.57,390.298c0-0.354-0.112-0.637-0.338-0.847c-0.225-0.21-0.53-0.315-0.917-0.315
            c-0.239,0-0.4,0.045-0.482,0.133c-0.083,0.089-0.124,0.273-0.124,0.554v4.199c0,0.215,0.027,0.383,0.082,0.505
            c0.056,0.121,0.23,0.182,0.524,0.182c0.35,0,0.646-0.091,0.89-0.273c0.244-0.182,0.365-0.445,0.365-0.791V390.298z"/>
            <g transform="translate(159.486 191.038)">
                <path fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M474.595,208.62
                c-0.066,0.321-0.218,0.619-0.438,0.862c-0.237,0.242-0.534,0.417-0.861,0.506c-0.454,0.121-0.924,0.177-1.394,0.165
                c-0.796,0.075-1.591-0.148-2.232-0.625c-0.511-0.597-0.755-1.379-0.673-2.161v-1.511h0.85v1.77
                c-0.069,0.505,0.097,1.014,0.451,1.382c0.484,0.273,1.039,0.392,1.592,0.342c0.538,0.056,1.079-0.086,1.52-0.4
                c0.317-0.355,0.472-0.826,0.428-1.3v-4.629c0.008-0.436-0.167-0.856-0.484-1.156c-0.355-0.328-0.827-0.498-1.31-0.473h-1.77
                v-0.732h1.77c0.462,0.019,0.917-0.122,1.287-0.4c0.341-0.276,0.53-0.699,0.507-1.137v-4.1c0.036-0.473-0.133-0.939-0.464-1.279
                c-0.441-0.326-0.986-0.478-1.532-0.427c-0.561-0.067-1.128,0.076-1.591,0.4c-0.301,0.363-0.445,0.831-0.4,1.3v1.842h-0.873V195.3
                c-0.004-0.389,0.039-0.778,0.129-1.157c0.075-0.326,0.234-0.627,0.46-0.874c0.247-0.253,0.551-0.443,0.886-0.555
                c0.461-0.147,0.944-0.215,1.428-0.2c0.751-0.055,1.497,0.163,2.1,0.615c0.535,0.582,0.793,1.366,0.708,2.152v4
                c-0.008,0.337-0.08,0.67-0.212,0.981c-0.165,0.377-0.499,0.653-0.9,0.745c0.379,0.12,0.699,0.376,0.9,0.719
                c0.154,0.295,0.235,0.622,0.236,0.955v4.716C474.718,207.808,474.679,208.218,474.595,208.62z"/>
            </g>
        </g>
        </symbol>
        <symbol version="1.1" id="score" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 31.361 42.915" xml:space="preserve">
        <path fill="#242424" d="M15.475,0C5.55,0,0,3.139,0,3.139v23.263c0,0,0.247,9.7,15.708,16.513
            c15.467-6.817,15.653-16.513,15.653-16.513V3.139C31.361,3.139,25.404,0,15.475,0z"/>
        <path fill="#FFFFFF" d="M15.491,0.834c-9.364,0-14.6,2.962-14.6,2.962v22.7c0,0,0.233,9.149,14.821,15.58
            c14.587-6.431,14.766-15.58,14.766-15.58v-22.7C30.478,3.796,24.855,0.834,15.491,0.834z"/>
        <path fill="#242424" d="M15.503,1.888c-8.8,0-13.718,2.8-13.718,2.8v21.438c0,0,0.219,8.64,13.924,14.713
            c13.7-6.073,13.873-14.713,13.873-14.713V4.685C29.582,4.685,24.3,1.888,15.503,1.888z"/>
        <g transform="translate(-25.659 266.036)">
            <path fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M43.591-239.691
                c-0.628,0.489-1.415,0.726-2.208,0.666c-0.797,0.08-1.592-0.169-2.2-0.689c-0.478-0.579-0.713-1.321-0.655-2.069v-1.5h0.865v1.783
                c-0.031,0.465,0.139,0.921,0.467,1.251c0.436,0.328,0.977,0.482,1.52,0.433c0.54,0.035,1.077-0.105,1.531-0.4
                c0.374-0.318,0.57-0.797,0.526-1.286v-5.914c-0.131,0.178-0.289,0.336-0.467,0.468c-0.214,0.162-0.445,0.299-0.69,0.408
                c-0.268,0.121-0.546,0.219-0.83,0.293c-0.282,0.076-0.573,0.116-0.865,0.117c-1.04,0.093-1.958-0.674-2.051-1.714
                c-0.007-0.083-0.009-0.166-0.006-0.249v-5.634c-0.004-0.386,0.039-0.77,0.129-1.145c0.075-0.323,0.232-0.621,0.456-0.865
                c0.244-0.25,0.545-0.439,0.877-0.549c0.449-0.145,0.919-0.213,1.391-0.2c0.776-0.049,1.544,0.175,2.173,0.632
                c0.564,0.546,0.849,1.319,0.772,2.1v11.992C44.392-240.998,44.124-240.243,43.591-239.691z M43.463-253.962
                c0.028-0.477-0.161-0.941-0.514-1.262c-0.452-0.33-1.008-0.487-1.566-0.444c-0.515-0.023-1.023,0.121-1.45,0.409
                c-0.393,0.312-0.603,0.8-0.561,1.3v5.68c-0.008,0.337,0.098,0.666,0.3,0.935c0.291,0.302,0.706,0.45,1.122,0.4
                c0.285-0.006,0.568-0.049,0.841-0.129c0.306-0.084,0.598-0.214,0.865-0.386c0.264-0.17,0.495-0.388,0.679-0.643
                c0.188-0.262,0.287-0.578,0.28-0.9L43.463-253.962z"/>
        </g>
        </symbol>
    </svg>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i&display=swap');
:root {
    --grey : #8D8D8D;
    --black: #242424;
}
*,
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
html {
    padding:0;
    margin:0;
    height:100%;
}
body {
    font-family: 'Roboto', sans-serif;
    margin:0;
    height:100%;
    background: var(--black);
}
nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items:center;
    padding: 0px 60px;
    z-index:1;
}
button {
    border:none;
    cursor:pointer;
    padding:0;
    background:none;
}
button:focus {
    outline:none;
}
ul {
    display:inline-block;
    list-style-type: none;
    padding-left:0px;
}
body {
    /* border:10px solid white; */
    border-bottom:none;
}
a {
    text-decoration:none;
    color:inherit;
    display:inline-block;
    user-select:none;
}
svg {
    visibility:hidden;
}
.rider {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    margin: auto 0;
    overflow: hidden;
    z-index: 1;

}
.rider-img {
    width: 100%;
    height:100%;
    position:relative;
    z-index: -2;
    visibility:hidden;
    flex:1 0 100%;    
}
nav {
    height:110px;
    position:relative;
}
.align-left {
    width:40%;
    text-align:left;
}
.align-right {
    width:40%;
    text-align:right;
}
.center {
    width:20%;
    text-align:center;
}
.menu-btn {
    position:relative;
    width:34px;
    height:20px;
}
.menu-btn span {
    width:34px;
    height:2px;
    background:white;
    position:absolute;
    left:0;
}
.menu-btn span:first-child {
    top:0px;
}
.menu-btn span:nth-child(3) {
    top:20px;
}
.menu {
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;
    background: white;
    width: 275px;
    transform: translateX(-100%);
    /* box-shadow: 3px 0px 10px rgba(0,0,0,0.15); */
    z-index: 11;
}
.menu>ul {
    margin-top:35px;
}
.menu>ul>li {
    font-size: 22px;
    margin: 15px;
    transition:0.48s transform cubic-bezier(0.165, 0.84, 0.44, 1);
}
.menu>ul>li:hover {
    transform:translateX(10px);    
}
.menu-close-btn {
    position: absolute;
    top: 15px;
    right: 10px;
    width: 40px;
    height: 40px;
}
.menu-close-btn:before,.menu-close-btn:after {
    position:absolute;
    content:"";
    background: var(--black);
    width: 30px;
    height: 2px;
}
.menu-close-btn:before {
    transform: rotate(45deg);
    right: 5px;
}
.menu-close-btn:after {
    transform: rotate(-45deg);
    right: 5px;
}
.search-open-btn {
    position:relative;
    width:40px;
    height:40px;
}
.search-open-btn:after,.search-open-btn:before {
    position:absolute;
    content:"";
}
.search-open-btn:before {
    top:10px;
    right:14px;
    width:18px;
    height:18px;
    border:2px solid white;
    background:var(--black);
    border-radius:50%;
    z-index:2;
    transition:0.3s ease-out;
}
.search-open-btn:after {
    top:19px;
    right:16px;
    width:2px;
    background:white;
    border-radius:4px;
    height:15px;
    transform:rotate(-45deg);
    z-index:1;
    transition:0.3s ease-out;
}
.search-close-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: white;
    border-radius: 2px;
    position: fixed;
    top: 42px;
    right: 60px;
    z-index: 10;
}
.search-close-btn:before,.search-close-btn:after {
    content:"";
    position:absolute;
    height: 2px;
    width: 20px;
    background: var(--black);
}
.search-close-btn:after {
    transform: rotate(45deg);
    right: 10px;
}
.search-close-btn:before {
    transform: rotate(-45deg);
    left: 10px;
}
.logo {
    width: 86px;
    height: 86px;
}
.search-form-container {
    width:100%;
    position:fixed;
    top:0;
    left:0;
    border:none;
    background:#FFF;
    height:120px;
    transform:translateY(-100%);
    opacity:0;
    z-index:2;
}
input {
    font-family:'Roboto',sans-serif;
}
.search-input {
    font-size:1.5em;
    padding-left:20px;
    background:#FFF;
    width:100%;
    border:none;
    height: 120px;
    border-bottom:none !important;
}
.search-input:focus {
    outline:none;
}
::placeholder {
    color:var(--black);   
    font-weight: 300;
}
main {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width: 100%;
    height:100%;
    display: flex;
    justify-content: space-between;
    margin:auto;
    max-width: 1070px;
}
.rider-info {
    margin:auto 0;
}
h2 {
    font-weight:100;
    font-style: italic;
    color:#8D8D8D;
    font-size:30px;
}
.title {
    position:relative;
    display:inline-block;
    margin:15px auto;
}
.rider-name {
    color:white;
    font-weight:300;
    font-size:80px;
    line-height: 80px;
    margin:0 auto;
}
.rider-stats {
    color: var(--grey);
    display: flex;
    flex-direction: row;
    margin-top:25px;
    margin-bottom:10px;
}
.rider-stats>li {
    display: flex;
    font-size: 22px;
    align-items: center;
}
.svg-stats {
    width: 70px;
    height: 70px;
    margin:0 5px;
}    
.rider-trick {
    font-weight:300;
    font-size:28px;
    color:white;
    cursor:pointer;
    margin: 0 auto;
    text-transform:capitalize;
}
.rider-trick-video-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: scale(0);
    z-index: 11;
    background: white;
    padding: 30px;
    box-shadow: 3px 6px 10px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 840px;
    width: 100%;
    height:100%;
    max-height: 472px;
    position:absolute;
    visibility:hidden;
}
.rider-trick-video {
    border:none;
}
.close-video {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
}
.close-video:before,.close-video:after {
    content: "";
    position: absolute;
    height: 2px;
    width: 15px;
    background: black;
    right: 2px;
    top: 10px;
}
.close-video:before {
    transform: rotate(45deg);
}
.close-video:after {
    transform: rotate(-45deg);
}
.pagination-container {
    position: absolute;
    top: 50%;
    right: 70px;
    transform: translate(0,-50%);
}
.pagination {
    display: block;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin: 15px 0;
    position: relative;
    background: var(--grey);
    transition:0.5s cubic-bezier(1, 0, 0, 1) ;
}
.pagination:before {
    position: absolute;
    content: "";
    background:white;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    top: 0px;
    left: 0px;
    opacity:0;
    transition:0.5s ease-in-out;
    transform:scale(0);
}
.pagination.active:before {
    opacity:1;
    transform:scale(1);
}
.content {
    position:relative;
    background:var(--black);
    height:100%;
    min-height:100%;
    width:100%;
    box-shadow: 4px 10px 10px rgba(0, 0, 0, 0.15),
    -4px 10px 10px rgba(0, 0, 0, 0.15), 
    0px -4px 10px rgba(0,0,0,0.15);
}
canvas {
    position: absolute;
    display: block;
    max-width: 100%;
    height: auto;
    flex: 1 0 100%;
}
/* LOADER */
.preloader {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    bottom:0;
    right:0;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index:15;
}
#preloader-svg {
    width: 150px;
} 
/* MEDIA QUERIES */ 
@media screen and (max-width:1190px) {
    .rider-info {
        margin:auto 15px;
    }
}
@media screen and (max-width:991px) {
    main {
        flex-direction:column-reverse;
        position:relative;
        background:var(--black);
    }
    nav {
        padding:0 35px;
    }
    .rider {
        margin:auto;
    }
    .rider-info {
        margin:auto 60px;
        /* padding-bottom: 5em; */
    }
    .rider-trick {
        margin-bottom:30px;
    }
    .search-close-btn {
        right:40px;
    }
    .pagination-container {
        right:46px;
    }
    .rider-trick-video-container {
        max-width:650px;
        max-height:390px;
    }
}
@media screen and (max-width:768px) {
    .rider-name {
        font-size:60px;
        line-height:60px;
    }
    .svg-stats {
        width:50px;
        height: 50px;
    }
}
@media screen and (max-width:500px) {
    .rider-name {
        font-size:50px;
        line-height:50px;
    }
    .svg-stats {
        margin:0;
    }
}
@media screen and (max-width:414px) {
    nav {
        padding: 0px 15px;
        height:85px;
    }
    .logo {
        width: 60px;
        height: 60px;
    }
    .title {
        font-size:24px;
    }
    .rider-name {
        font-size:40px;
        line-height:40px;
    }
    .rider-trick {
        font-size:24px;
    }
    .search-form-container,.search-input {
        height:100px;
    }
    .search-close-btn {
        right:18px;
        top:30px;
    }
    .pagination-container {
        right:25px;
    }
    .rider-info {
        /* padding-bottom: 5em; */
        margin:0px 15px;
    }
    .rider-trick-video-container {
        max-width:375px;
        max-height:235px;
    }
}
@media screen and (max-width:320px) {
    .svg-stats {
        width:45px;
        height:45px;
    }
    .rider-stats>li {
        font-size:16px;
    }
    .rider-trick {
        font-size:18px;
    }
    .rider-trick-video-container {
        max-width: 320px;
        max-height: 205px;
    }
}
@media screen and (min-width:768px) and (max-height:700px) {
    .rider {
        max-height:480px;
    }
    .rider-name {
        font-size:72px;
        line-height:72px;
    }
    .svg-stats {
        width:60px;
        height:60px;
    }
}




              
            
!

JS

              
                const rider = document.querySelector('.rider')
// THREE JS STUFF
let vertex = `
    varying vec2 vUv;
    void main() {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    }
`;

let fragment = `
    varying vec2 vUv;

    uniform sampler2D currentImage;
    uniform sampler2D nextImage;  
    uniform float dispFactor;

    void main() {

        vec2 uv = vUv;
        vec4 _currentImage;
        vec4 _nextImage;
        float intensity = 0.5;

        vec4 orig1 = texture2D(currentImage, uv);
        vec4 orig2 = texture2D(nextImage, uv);
        
        _currentImage = texture2D(currentImage, vec2(uv.x, uv.y + dispFactor * (orig2 * intensity)));

        _nextImage = texture2D(nextImage, vec2(uv.x, uv.y + (1.0 - dispFactor) * (orig1 * intensity)));

        vec4 finalTexture = mix(_currentImage, _nextImage, dispFactor);

        gl_FragColor = finalTexture;

    }
`
// Scene
let scene = new THREE.Scene();
scene.background = new THREE.Color(0x242424);

let renderWidth = rider.clientWidth;
let renderHeight = rider.clientHeight;

const camera = new THREE.PerspectiveCamera(
    60,
    renderWidth / renderHeight,
    1,
    100
)
camera.position.z = 1

// Renderer
let renderer = new THREE.WebGLRenderer({
        canvas,
        antialias: true,
});
// Renderer opts
renderer.setSize( renderWidth, renderHeight );
renderer.setPixelRatio(window.devicePixelRatio || 1)


let loader = new THREE.TextureLoader();
loader.crossOrigin = "anonymous";

const imgs = Array.from(document.querySelectorAll('img'));
const riderImages=[]

imgs.forEach( ( img ) => {
    let image = loader.load( img.getAttribute( 'src' ));
    image.magFilter = image.minFilter = THREE.LinearFilter;
    image.anisotropy = renderer.capabilities.getMaxAnisotropy();
    riderImages.push( image );
});

let mat = new THREE.ShaderMaterial({
    uniforms: {
        dispFactor: { type: "f", value: 0.0 },
        currentImage: { type: "t", value: riderImages[0] },
        nextImage: { type: "t", value: riderImages[1] },
    },
    vertexShader: vertex,
    fragmentShader: fragment,
    transparent: true,
    opacity: 1.0
});

let geometry = new THREE.PlaneBufferGeometry(
    1,1.25
);

let object = new THREE.Mesh(geometry, mat);
object.position.set(0, 0, 0);

scene.add(object);

window.addEventListener('resize',() => {
    camera.aspect = rider.clientWidth / rider.clientHeight
    camera.updateProjectionMatrix();
    renderer.setSize(rider.clientWidth,rider.clientHeight);
})

let animate = () => {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
};
animate();

// GSAP ANIMATIONS
// RIDER DATA 
const riders = ["Nyjah Huston","Shane O'Neill","Chris Cole","Paul Rodriguez"],
stats = [['40 x','24 x','7 x','2 x'],['14 x','3 x','5 x','3 x'],['14 x','2 x','7 x','2 x'],['16 x','3 x','3 x','2 x']],
tricks = ["Backside 270 Noseblunt","Switch Double 360 Flip","360 Flip 50-50 grind","Nollie Crooked Nollie Front Foot Flip"];
videoSrc = ["j9ckem2DsNQ","zIWCV23EPEs","A2Gyo4hvaA0","OO-vRd-d1m8"]
const riderName = document.querySelector('.rider-name'),
riderTrick = document.querySelector('.rider-trick')
riderTrickSrc = document.querySelector('.rider-trick-video');

const stat1 = document.querySelector('.stat-1'),
stat2 = document.querySelector('.stat-2'),
stat3 = document.querySelector('.stat-3'),
stat4 = document.querySelector('.stat-4');



const pagBtn = document.querySelectorAll('.pagination')
let isSliding = false;


const setActiveClass = target => {
    pagBtn.forEach( btn => {
        btn.classList.remove('active')      
    })
    target.classList.add('active')
}

pagBtn.forEach( (btn,index)=> {
    btn.addEventListener('click', e => {
        if (isSliding == false) {
            animateDisplace(index);
            setActiveClass(e.currentTarget)
            // CHANGE RIDER DATA HERE
            const tl = new TimelineMax();
            tl.to(riderName,0.45,{opacity:0,y:7,filter:'blur(10px)'},'in')
            .to(riderTrick,0.45,{opacity:0,y:7,filter:'blur(10px)'},'in')
            .add(() => {riderName.textContent = riders[index]},'in+=0.45') 
            .add(() => {riderTrick.textContent = tricks[index]},'in+=0.45') 
            .add(() => {stat1.textContent = stats[index][0]})
            .add(() => {stat2.textContent = stats[index][1]})
            .add(() => {stat3.textContent = stats[index][2]})
            .add(() => {stat4.textContent = stats[index][3]})
            .to(riderName,0.45,{opacity:1,y:0,filter:'blur(0px)'},'out')
            .to(riderTrick,0.45,{opacity:1,y:0,filter:'blur(0px)'},'out')
            riderTrickSrc.setAttribute("src",`https://www.youtube.com/embed/${videoSrc[index]}`)
        }
    })
   
})
const animateDisplace = (index) => {
    isSliding=true
    mat.uniforms.nextImage.value = riderImages[index];
    mat.uniforms.nextImage.needsUpdate = true;

    TweenLite.to( mat.uniforms.dispFactor, 1, {
        value: 1,
        ease: 'Power4.easeInOut',
        onComplete: () => {
            mat.uniforms.currentImage.value = riderImages[index];
            mat.uniforms.currentImage.needsUpdate = true;
            mat.uniforms.dispFactor.value = 0.0;
            isSliding = false
        }
    });
} 

/* */
const openSearch = document.querySelector('.search-open-btn'),
search = document.querySelector('.search-form-container'),
closeSearch = document.querySelector('.search-close-btn');
let searchOpen = false

openSearch.addEventListener('click',()=> {
    TweenLite.to(search,0.32,{y:'0%',opacity:1,onComplete:()=>{
        searchOpen = true
    }})
})
closeSearch.addEventListener('click',()=> {
    TweenLite.to(search,0.32,{y:'-100%',opacity:0,onComplete:()=>{
        searchOpen = false
    }})
})
document.querySelector('.search-input').addEventListener('keydown',(e) =>{
    if (e.keyCode === 13) {
        e.preventDefault();
    }   
})


const menu = document.querySelector('.menu'),
openMenu = document.querySelector('.menu-btn'),
closeMenu = document.querySelector('.menu-close-btn'),
menuLink = document.querySelectorAll('.menu-link');
let menuOpen = false

openMenu.addEventListener('click',()=>{
    TweenLite.to(menu,0.32,{x:'0%'})
    TweenMax.staggerFromTo(menuLink,0.16,{opacity:0,x:-10},{opacity:1,x:0,delay:0.16,onComplete: ()=> {
        menuOpen = true
    }},0.1)
})

closeMenu.addEventListener('click',()=>{
    TweenLite.to(menu,0.32,{x:'-100%',onComplete:() => {
        menuOpen = false
    }})
})

// close menu/search if open when body is clicked
const checkMenu = (e) => {
    TweenLite.to(menu,0.32,{x:'-100%',onComplete:() => {
        menuOpen = false
    }})
}
const checkSearch = (e) => {
    TweenLite.to(search,0.32,{y:'-100%',opacity:0,onComplete:()=> {
        searchOpen = false
    }})
}

const sForm = document.querySelector('.search-input')
document.querySelector('.content').addEventListener('click',(e) => {
    if (!e.target.classList.contains('menu') && !e.target.classList.contains('menu-btn') && menuOpen === true 
        && !e.target.classList.contains('menu-link')) {   
        checkMenu(e);
    }  
    if (!e.target.classList.contains('search-open-btn') && !e.target.classList.contains('search-input') && searchOpen == true) {
        checkSearch();
    }
})

TweenMax.set('svg',{visibility:"visible"})
// IMAGESLOADED
const imgsToLoad = imagesLoaded(imgs)
let loadingProgress = 0
let itemsLoaded = 0

imgsToLoad.on('progress',(instance,image)=> {
    itemsLoaded ++
    let totalProgress = itemsLoaded / imgs.length  
    TweenMax.to(loadTl,1.4,{progress:totalProgress,ease:Linear.easeNone})
})
// Loading animation
TweenMax.set('#loader-fill',{drawSVG:"0% 0%"})
const loadTl = new TimelineMax({paused:true,onComplete:()=>{
    TweenLite.to('.preloader',0.48,{y:'-100%',ease:Power2.easeIn})
    // LOAD COMPLETE --> ANIMATE ELEMENTS IN 
    TweenMax.fromTo(rider,0.5,{opacity:0,immediateRender:true},{opacity:1,delay:0.48})
    TweenMax.fromTo('.rider-info',0.5,{opacity:0,immediateRender:true},{opacity:1,delay:0.48})
}})
loadTl.to('#loader-fill',2,{drawSVG:"100%"})

// Video 
document.querySelector('.rider-trick').addEventListener('click',()=> {
    TweenMax.set('.rider-trick-video-container',{autoAlpha:1,xPercent:-50, yPercent:-50})
    TweenMax.to('.rider-trick-video-container',0.32,{scaleX:0.0025,scaleY:1,transformOrigin:"left top"})
    TweenMax.to('.rider-trick-video-container',0.32,{scaleX:1,transformOrigin:"left top",delay:0.32})
    TweenMax.fromTo('.rider-trick-video',0.3,{opacity:0,immediateRender:true},{opacity:1,delay:0.64})
})

document.querySelector('.close-video').addEventListener('click',()=>{
    TweenMax.to('.rider-trick-video-container',0.32,{autoAlpha:0})
    TweenMax.set('.rider-trick-video-container',{scale:0,delay:0.32})
})
              
            
!
999px

Console