Jump to content
Search Community

Scroll Animation with a Sprite Sheet (Hero Image Size)

talkingSkunk test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hello,

I'm using the codepen as a template to create a scroll animation with a sprite sheet. My challenge now is to fill the entire viewport with the image, but I am struggling, as the image remains a small size.

 

How would you increase the spritesheet image (individual image size is relatively smaller than viewport), so the image will fill the screen as you scroll?

 

Help would be appreciated.

 

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"></script>
    <script src="./index.js" defer></script>
</head>
<body>

    <section class="scene section section-one">
        <div class="viewer viewer-one"></div>
    </section>

</body>
</html>

CSS:

html,
body {
  height:100%;
  background: #021c53;
}

.section {
  height: 100%;
  background: black;
  color: white;
}

.scene {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background: black;
}

.viewer {
  max-width: 100%;
  max-height: 100%;
  margin-left: auto;
  margin-right: auto;
  object-fit: contain;
  background-image: url('./spriteDesk.jpg');
  /* background-size: 11580px 11550px; */
  background-repeat: no-repeat;
  background-position: 0 0;
}

JS:


const rows = 5
const columns = 10
const frame_count = rows * columns
const imageWidth = 6336
const imageHeight = 1782
const horizDiff = imageWidth / columns
const vertDiff = imageHeight / rows

gsap.set(".viewer-one", {width: horizDiff, height: vertDiff});

const setPos = gsap.quickSetter(".viewer-one", "background-position");

const obj = {num: 0};
gsap.to(obj, {
  num: frame_count,
  ease: "steps(" + frame_count + ")",
  scrollTrigger: {
    trigger: ".section-one",
    start: "top top",
    end: "+=" + imageHeight,
    pin: true,
    anticipatePin: 1,
    scrub: 1
  },
  onUpdate: () => setPos(`
    ${-Math.round((obj.num % columns) * horizDiff)}px
    ${-Math.round(Math.floor(obj.num / columns) * vertDiff)}px
  `)
});

 

See the Pen yLOaVpE by make96 (@make96) on CodePen

Link to comment
Share on other sites

  • Solution

I think you might have to calculate the aspect ratio yourself, and on every resize. Just a simple demonstration showing how to mimic the behavior of svg. So you can play around with the aspectType, alignX, and alignY variables.

 

See the Pen 3fdc4c75dbc38e9cfc06c7723588e79d by osublake (@osublake) on CodePen

 

Instead of messing with the background, I think it's easier to just draw your frames on a canvas element. That way you can treat the canvas element just like an image.

 

See the Pen fad36ed2ac8608de7070e1caa1055461 by osublake (@osublake) on CodePen

 

 

  • Like 6
Link to comment
Share on other sites

4 hours ago, OSUblake said:

I think you might have to calculate the aspect ratio yourself, and on every resize. Just a simple demonstration showing how to mimic the behavior of svg. So you can play around with the aspectType, alignX, and alignY variables.

 

 

 

 

Instead of messing with the background, I think it's easier to just draw your frames on a canvas element. That way you can treat the canvas element just like an image.

 

 

 

 

 

I tried the second code, and it worked. Thank you!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...