ScrollTrigger event onRefresh prevent play animation

[_Greg _]

Hi.

ScrollTrigger is great! 

I want to stop play again animation after i leave and back to browser tab.

As you can see on my example if you scroll down page to position when tl_inout played (green box will be on screen) and switch browser tab and then back (or just resize browser) - animation will start play from beginning.

 

I wan't that animation will be in same place (if before trigger it must be on progress(0), if after trigger - progress(1))

 

I think i do somthing wrong.

 

i try add this  but its not working:

onRefresh: ({progress, direction, isActive}) => {
  if(direction === 1){
    tl_inout.progress(1)
  }else if(direction === -1){
    tl_inout.progress(0)
  }
}

 

And sorry for my english

 

And sometimes you get result like on screen:

See the Pen PoZoKEm?editors=0010 by -greg- (@-greg-) on CodePen

[GreenSock]

Sorry about any confusion there - I believe that's fixed in the upcoming 3.3.1 release which you can preview at: 

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js

 

(which is what you've got in your CodePen already, so if you do a hard-refresh, you should see it working the way you expected, right?)

[_Greg _]

Yes. Thank you! Everything works great! ❤️
GSAP is always on top

Can copy that version to my local project before release?

ScrollTriger with GSAP is the best!

[GreenSock]

12 minutes ago, Nekiy2 said:

Yes. Thank you! Everything works great! ❤️
GSAP is always on top

Can copy that version to my local project before release?

ScrollTriger with GSAP is the best!

Sure, be my guest. You can use that beta version if you'd like.

 

Happy scrolling!

[_Greg _]

I test it on my local project GSAP v 3.3.1 and ScrollTrigger v 3.3.1 and have some more issue with onRefresh and how ScrollTrigger count trigger height, how can i sent private link on youtube video?

[GreenSock]

I just sent you an email. You can reply to that. Or you can always direct message me here in the forums. 

[_Greg _]

Thank you, i sent you message

[_Greg _]

I update Codepen demo (add one more pin element on page) all working good, on my video is not working

 

[GreenSock]

For others who read this...

 

The problem seems to be that the site was doing some loading or repositioning or resizing AFTER the initial load (which is when ScrollTrigger does a refresh()), thus the positioning was off. The solution was to simply call ScrollTrigger.refresh() when all of those tasks were done. 👍 From what I can tell, it wasn't a bug or problem with ScrollTrigger. 

[_Greg _]

Thank you!
Yes, its not a problem with ScrollTrigger, its problem with my code

So maybe you can delete this post?

[ZachSaucier]

3 minutes ago, Nekiy2 said:

maybe you can delete this post?

It might be useful to people later so we'd prefer to leave it up.