"Sprite" animation

[Samuele]

Hi all!
I have some issue to figured out how to set correctly this codepen:

See the Pen mdVEpKK by GreenSock (@GreenSock) on CodePen

What I'm trying to achieve is to make every single frame large as the screen, but in my codepen it seems that the sprite png is contained.
Am I using a wrong css?

See the Pen BamMxbq by samuele-kriedi (@samuele-kriedi) on CodePen

[OSUblake]

Hi Samuele,

 

You'd need to change the background-size, probably with cover.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

 

[mikel]

Hey @Samuele

 

This could be a way ...

 

See the Pen qBVgQNL??editors=1100 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[Samuele]

Thank you @mikel and @OSUblake, I feel that I am close to the solution.
Probably the animation doesn't work due to a wrong sprite png export.

Based on this dude, could you suggest me what settings are used?


I'm using this software to generate it:
https://www.toptal.com/developers/css/sprite-generator/

[mikel]

Hey @Samuele,

 

The Dude sprite is ok: width 2000 px, 10 pics.

 

So for your setup you probably need:

 

.viewer {
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  width: calc(2000px / 10); // !!!
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/doodle-sprite.png");
  background-repeat: no-repeat;
  background-position: 0 50%;
}

 

Happy tweening ...

Mikel

 

[Samuele]

Brilliant! I shifted the code to my project and it works.
Just one more thing, to achieve more "smoothness" between frames should I edit this property:
 

ease: "steps(" + frame_count + ")",

 The steps feels too marked.

[Cassie]

If the step feels 'too marked' you'll need to add more frames to your sprite! GSAP can't magically fill in the gaps for you.

More frames = smoother animation

[Samuele]

Thank you @Cassie!
Although I was referring to the transition between frames, something like css property transition ease-in/out.
Probably as you said, is something related to the keyframes...

 

[Cassie]

There's no transition between frames. A stepped ease jumps between 'steps' - the number of steps map to the number of photos in the sprite.

https://greensock.com/docs/v3/Eases

If you want to fade between the images you'll need to create a timeline instead and fade between each step.

If you want to create a smoother looking sequence, you need more photos

[Cassie]

You can't really 'transition' smoothly between two photos you see. It's either going to be one photo or the next photo. The best you can do is crossfade.

If you want the animation to look 'eased' or more 'smooth' you need to physically add more frames, sprites are a lot like traditional hand drawn animation.