Jump to content
Search Community

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

eballeste_hero test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution



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!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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!

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.
  • Create New...