Scroll Animation with multiple Sprite Sheet

[howardxiong]

Hi, guys.

I want to know how to run this Scrolltriger sprite animation on multiple section with different sprite picture.

So it would look something like this:

 

Intro sprite animation sequence (linear)
    Scroll scroll
Animation sprite 
    Scroll scroll
Next animation sequence (linear)
    Scroll scroll
Animation sprite 
    Scroll scroll
Next animation sequence (linear)
    Scroll scroll
Animation sprite 
...
End

Please someone help me how to do it Thanks.

See the Pen wvROLMQ by Bigbear-the-builder (@Bigbear-the-builder) on CodePen

[Rodrigo]

Hi,

 

There are a few alternatives to tackle this, one is to remove the pinSpacing and the extra canvas elements, so the other sections go over it:

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

 

Another option would be this:

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

 

Sorry for the hideous JS (not my proudest moment may I say). I'm 100% sure that there's a dynamic way to tackle this, I just don't have the time to find it, but  the approach makes sense IMHO.

 

Hopefully this helps.

Happy Tweening!

[howardxiong]

Thanks for your answer, Rodrigo. I still want to find out a perfect way to handle different sprite sheet.

I attach some examples, could anyone provide me a perfect solution?

[Rodrigo]

Hi,

 

If you have three different spritesheets then repeat the procedure for each one. Honestly I don't know what's so complicated about that. It seems to me that you are not entirely understanding how this concept actually works. Basically what changes the part of the image that is rendered in the canvas is the onUpdate method:

function onUpdate(ctx, obj) {
  ctx.clearRect(0, 0, horizDiff, vertDiff);
  const x = Math.round((obj.num % columns) * horizDiff);
  const y = Math.round(Math.floor(obj.num / columns) * vertDiff);
  ctx.drawImage(image, x, y, horizDiff, vertDiff, 0, 0, horizDiff, vertDiff);
}

That basically clears the canvas element, gets the section of the spritesheet that has to be shown in the next frame and then draws that section of the image, nothing more. The rest is knowing the dimensions of the spritesheet, the amount of columns and rows of it.

 

If I was you I would concentrate in making the sequence of each spritesheet working on each canvas first and then tie ScrollTrigger to it.

 

Unfortunately we don't have the time resources to create all that for you, sorry.

 

Another option could be PIXIJS spritesheets:

https://pixijs.com/examples/sprite/animated-sprite-jet

 

Hopefully this helps.

Happy Tweening!

[howardxiong]

Hi, thanks for your help. I still feel lagged when I put some too large spritesheets. The experience performence needs to be fast and simply. I decide to swich to Pixijs + Gsap. I wrote some code that shows the animation. Please let me know how to accompolish scroll animation effect. Some files are too large that can't upload, sorry 

 

See the Pen poGZBXL by Bigbear-the-builder (@Bigbear-the-builder) on CodePen

[Rodrigo]

Hi,

 

Your codepen is not loading PIXI, it has no scroll space (I can't see any scroll bar in it) and finally add your code to the JS tab of the codepen editor please:

 

Happy Tweening!

[howardxiong]

Ok, this is new codepen

See the Pen qBgMXay by Bigbear-the-builder (@Bigbear-the-builder) on CodePen

[Rodrigo]

Hi,

 

You have a few logic issues that stem from not knowing PIXI's API correctly. You should create the animated sprite and keep it paused:

https://pixijs.download/release/docs/PIXI.AnimatedSprite.html

 

Then you can tween the currentFrame property using GSAP with ease none and you can tie that to a scroll position using ScrollTrigger.

 

Here is a fork of your codepen:

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

 

Hopefully this helps

Happy Tweening!

[howardxiong]

Hi, Rodrigo

I'm so appreciated. Back to the previous talk, I want to make so many scroll animated sprite sheets. I did this.

See the Pen qBgMXay by Bigbear-the-builder (@Bigbear-the-builder) on CodePen

It is confused when I fit the the pixi viewport full screen with same ratio. And I want to turn on TOUCH mode for mobile devices compatibility.

Also a little bit of logic issues from scrolling.

 

[Rodrigo]

Hi,

 

The issue is that the sprite sheets you're using are not loading in order which is completely logic, they are loaded asynchronously so the smallest one (in KB terms) will be loaded first and so forth. This causes the ScrollTrigger instances to not be created in the order they appear in the screen as the user scrolls down.

 

You have to assign a specific refreshPriority to each one:

refreshPriority
number - it's VERY unlikely that you'd need to define a refreshPriority as long as you create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right)...which we strongly recommend doing. Otherwise, use refreshPriority to influence the order in which ScrollTriggers get refreshed to ensure that the pinning distance gets added to the start/end values of subsequent ScrollTriggers further down the page (that's why order matters). See the sort() method for details. A ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to use negative numbers too, and you can assign the same number to multiple ScrollTriggers.

 

Here is a fork of your latest demo:

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

 

Hopefully this helps.

Happy Tweening!