Bootstrap Snippet Looping sprite animation using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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',
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Looping sprite animation"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"Looping sprite animation" Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"Looping sprite animation"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY