Force PNG sequence to play twice during scrollTrigger

[DevC 6 Likes (Newbie)]

Hi, working on a scroll-based PNG sequence and I need to optimize the asset a bit. The raw asset plays forward then reverse. I'd like to cut the amount of frames in half and just reverse the asset on my own. Any idea on how to do that within the scroll movement?

See the Pen VwrZgoq by dcha (@dcha) on CodePen

[DevC 6 Likes (Newbie)]

Or if it makes more sense, I'd like to replicate the asset above by cutting it in half and looping it within the scroll movement. The asset of 442 frames is for illustration of final product I'd like to land on. It should end up 221 frames obviously 😅

[Rodrigo 5,068 Likes (Superhero)]

Hi,

 

I'm not sure I follow you correctly. Right now it seems that the card is rotating in both directions as you scroll up/down which seems to be included in the sprites for the animation. Maybe I'm missing something obvious here, sorry.

 

In terms of GSAP what you can do is set the repeat amount to 1 and yoyo to true:

gsap.to(phone, {
  frame: frameCount - 1,
  snap: "frame",
  repeat: 1,
  yoyo: true,
  scrollTrigger: {
    scrub: 0.75
  },
  onUpdate: render // use animation onUpdate instead of scrollTrigger's onUpdate
});

Based on the response you added to the thread it seems that the repeat/yoyo approach might be what you're looking for.

 

Let us know how it works and if you keep having issues.

Happy Tweening!

[DevC 6 Likes (Newbie)]

Exactly it, thank you