Jump to content
Search Community

Jump shift on the FLIP plugin tutorial

canaluna test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

The attached code is basically based on the FLIP plugin tutorial on GSAP's YouTube video https://www.youtube.com/watch?v=byyHoLPSxSQ, but some paragraphs are added by me to the bottom of the grid gallery. 

 

I have an issue of jump layout shift when I click the first image from the lower/middle part of the paragraph section, as you see in the attached movie. 

 

How can I fix this?  Thank you for your help. 

See the Pen GRerJVW by nishinak (@nishinak) on CodePen

Link to comment
Share on other sites

  • Solution

I see that happening, but it has nothing to do with GSAP/Flip. Try removing Flip completely and you'll see the exactly the same thing happens. I don't have time to dig into the CSS/layout issue right now (we really try to keep these forums focused on GSAP-specific questions), but hopefully that at least helps narrow things down for you a bit. 

Link to comment
Share on other sites

Thank you for reply!  I understand your point.  To fix this, I will rewrite the code (bigDog.dataset.grid = dog.dataset.grid, etc) to a primitive way, like addClass/removeClass methods. 

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...