Jump to content


Force PNG sequence to play twice during scrollTrigger

Moderator Tag
Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

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 😅

Link to comment
Share on other sites

  • Solution



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!

Link to comment
Share on other sites

Exactly it, thank you

  • Like 1
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.