<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="container"> <div class="sticky"> <div class="sprite"> </div> </div> </section> <script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script> <script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script> <script> // declare the variables const sprite = document.querySelector('.sprite'); const spriteWidth = 150; // in pixels const frameCount = 60; // number of frames in the sprite sheet // set up the animation timeline const tl = gsap.timeline({ repeat: 3, }); for (let i = 0; i < frameCount; i++) { const xPos = -i * spriteWidth; tl.to(sprite, { backgroundPosition: `${xPos}px 50%`, ease: 'steps(1)', }); } // set up the ScrollTrigger ScrollTrigger.create({ trigger: '.container', start: 'top top', end: 'bottom bottom', scrub: true, animation: tl, anticipatePin: 1, markers: true, // for debugging purposes }); </script>

.container { height: 800vh; margin: 50vh 0; } .sticky { position: sticky; top: 0; height: 100vh; max-width: 900px; margin: auto; background: black; display: flex; align-items: center; justify-content: center; } .sprite { border: 2px red solid; aspect-ratio: 5 / 14; max-width: 150px; width: 100%; background-image: url(https://uploads-ssl.webflow.com/60f02d1d1cfede9c11edd055/6436ae2947198065e31928ea_anae-sprite-long.jpg); background-repeat: no-repeat; background-position: 0 50%; background-size: cover; }