Sprite animation sequence with New ScrollTrigger

[Simone Bertoloni]

 

Hi everyone,

I would like to reproduce the Apple AirPods effect of this pen with ScrollTrigger:

 

 

Here is an example made with scrollMagic:
 

https://webdesign.tutsplus.com/tutorials/how-to-animate-a-coffee-drinking-sprite-with-scrollmagic--cms-24795

 

Can you help me join these Pen by using the new scrollTrigger Plugin?

Thanks so much

See the Pen ZEbGzyv by j-v-w (@j-v-w) on CodePen

[GreenSock]

No problem: 

See the Pen mdVEpKK?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Notice how much easier it is. One tween. Done! No fancy SCSS necessary, no looping through and creating a bunch of ScrollMagic Scenes, etc. 

 

Does that help? 

[Simone Bertoloni]

It seems perfect to me!
Many Thanks!!!!!

[Simone Bertoloni]

Hi Jack,

could you instead show me how you would do the same animation using multiple separate images instead of a single sprite image?

Do you have any solution to better manage the uploading of images and the waiting time?

 

In this codepen for example 148 separate images are used:

 

 

Single image link:
https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/0001.jpg

 

Thanks for your help.

[ZachSaucier]

27 minutes ago, Simone Bertoloni said:

could you instead show me how you would do the same animation using multiple separate images instead of a single sprite image?

Use an array and show/hide your images as necessary. You could either do that using a timeline (which is probably easier) or by using the onUpdate of a ScrollTrigger.

 

28 minutes ago, Simone Bertoloni said:

Do you have any solution to better manage the uploading of images and the waiting time?

Not sure what you mean. Images are going to take time to load. GSAP can't magically make them load faster  You can read articles on how to load images faster (reducing the size, using a more performant format, using a sprite, etc.)

[hidufy]

On 6/16/2020 at 5:12 PM, ZachSaucier said:

Use an array and show/hide your images as necessary. You could either do that using a timeline (which is probably easier) or by using the onUpdate of a ScrollTrigger.

@Simone Bertoloni did you manage that? If so, can you post the code? I'm hanging in the same place.

[ZachSaucier]

People viewing this thread my want to read about how I approached this sort of situation in an actual client project that was similar to the AirPods site:

 

[Mattrudd]

@GreenSock Hi - I’ve struggled previously with ScrollMagic so am excited to see how ScrollTrigger works better for me!

 

Can anyone offer me guidance about running the same type of static scroll animation using a different spritesheet to the coffee drinker above - with a different sizing and number of frames?

 

I promise I am working through the documentation, but keen on a quick fix for a current project 😁

 

Thanks!

[ZachSaucier]

@Mattrudd If you'd like our help debugging please create a minimal demo using CodePen and clearly explain the issue:

 

[Mattrudd]

53 minutes ago, ZachSaucier said:

@Mattrudd If you'd like our help debugging please create a minimal demo using CodePen and clearly explain the issue

 

Hi Zach, thanks so much for your quick reply. I've since found an alternative example and worked out how to tweak the parameters to fit my particular sprite sheet. 

 

See the Pen WNwZzWr by matt-rudd (@matt-rudd) on CodePen

 

I cobbled a Scrollmagic version of this (that I've posted before about!) but the div shifted position at the end of the pins - which I think was a known bug. Looking forward to implementing this ScrollTrigger version, and learning more about what it can do as I go!

 

All's left now is to the animation working in reverse with a scroll-up... any pointers there will be appreciated, but as I said earlier, I'm fully aware of my need to work patiently through the thorough documentation!

 

Seems to now be working in reverse - it didn't initially!

 

Thanks again.

[Mattrudd]

A couple of final fixes I could use some help on... scaling the design for devices.

 

1. When I add a main container and set that to scale by percentage, the animation doesn't scroll properly. I know I need to reference the parent in the JS but not sure how? I've researched this the best I can - found reference to _gsTransform but not sure how to implement.
2. I'd also like the tween to happen quicker (with less scrolling down) on mobile compared to desktop.

 

Thanks in advance for your help and patience - I'm learning more about CSS/JS/GSAP as I go here!

[ZachSaucier]

5 minutes ago, Mattrudd said:

found reference to _gsTransform but not sure how to implement.

That's from an old version of GSAP and is no longer applicable in GSAP 3. 

 

Please make a minimal demo of your issue for us to clearly see the trouble that you're running into if you'd like our help debugging  

[Mattrudd]

4 hours ago, ZachSaucier said:

That's from an old version of GSAP and is no longer applicable in GSAP 3. 

 

Please make a minimal demo of your issue for us to clearly see the trouble that you're running into if you'd like our help debugging  

 

I've looked into making the sizing responsive and the closest demo to what I'd like to achieve so far is this:

 

See the Pen poydNPO by matt-rudd (@matt-rudd) on CodePen

 

Except on sizing the window, the div with the animation jumps - I want this to stay central.

 

With the Scrollmagic version I made, the JS referenced a scene and I could then set the VH on that to affect the animation.

 

.scene {
  height: 100vh;
  width: 100%;
  position: relative;
  text-align: center;

 

I've a feeling I'm seeking help in the wrong place again - as this is clearly a CSS lack of knowledge and not GSAP! So I think I need to go away and learn about viewports properly.

[ZachSaucier]

Thanks for the demo; it turns out I was completely not understanding what you were wanting  

 

One of the common GSAP mistakes that you're making is setting transforms outside of GSAP  

 

 

Your calculations seem overly complex to me. Here's what I'd do:

See the Pen vYGWxOb?editors=0100 by GreenSock (@GreenSock) on CodePen

[talkingSkunk]

On 6/14/2020 at 4:25 AM, GreenSock said:

No problem: 

 

 

 

Notice how much easier it is. One tween. Done! No fancy SCSS necessary, no looping through and creating a bunch of ScrollMagic Scenes, etc. 

 

Does that help? 

Thank you for this. How would you make sure the individual frame fills up the viewport? I am struggling to get my frame fill up the viewport.

Help from anyone would be appreciated.

Here is my JS:

const rows = 5
const columns = 10
const frame_count = rows * columns - 1
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
  `)
});

 

[Neo1977]

On 6/14/2020 at 10:25 AM, GreenSock said:

No problem: 

 

 

 

Notice how much easier it is. One tween. Done! No fancy SCSS necessary, no looping through and creating a bunch of ScrollMagic Scenes, etc. 

 

Does that help? 

 

Say you have 2-3 absolute positioned captions on top/side, fading in/out in parallel with the same scroll. Tried adding a timeline but the captions come right after the image sequence is done... is it "labels" the right tool to run both at the same time?

[Cassie]

Sounds like you're after the position parameter

 

 

[Neo1977]

Thank you @Cassie, that's exactly what I needed.

[Cassie]

Hooray! 🥳