Issues w/context.revert() when used w/flip.to + scrolltrigger: { scrub:true }

[eballeste_hero]

Hello! Hi!

I am trying to do a text marquee effect that is tied to the scroll position but the only catch is that i need to make sure that the text starts flush and aligned to the left of a grid container and then ends flush and aligned to the right of the container.

My primitive dino brain could only think of trying to tween between an absolute positioned left: 0 element to a right: 0 position relative to the container using the flip plugin. I was able to setup this up and it works perfectly but as soon as the browser is resized the numbers are thrown off and the animation stops working.

I found a post where they recommend using gsap.context to revert the animations and then restart the flip so it uses numbers based on the new container dimensions. This works perfectly in the demo but I must be doing something wrong when I try to implement the behavior myself because the the animations are killed and the DOM element still keeps the flip related properties with all of it's transforms. If I try to only call context.revert() on window.resize without initializing the flip animation, it will still only kill the animation but keep the flip related properties. 

Am I missing something? A million thanks for your time and help.

 

See the Pen VwVQQXw?editors=1111 by hero-cosmetics-dev (@hero-cosmetics-dev) on CodePen

[Rodrigo]

Hi,

 

If I'm understanding correctly what you're trying to do, honestly I don't think you need Flip for this.

 

Here is a simple example that uses invalidateOnRefresh in order to flush the initial values of the animation and function based values in order to get the right ones when ScrollTrigger refreshes:

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

 

Hopefully this helps.

Happy Tweening!

[eballeste_hero]

thank you so much @Rodrigo!!

I knew there had to be a simpler solution to what I was trying to achieve!

I did eventually figure out my original problem, I had to clear out the styles using: $marqueeTxt.style.cssText = "";
I sorta assumed that context.revert() was doing this based on the docs but it wasn't.

I'm definitely scrapping everything I just did and using your approach instead, thank you!