Flip Plugin just stopped working

[KwabenaOwusu]

Hi Team GSAP,

The flip plugin just stopped working.

Even though I didn't change the code.

 

The console doesn't show any errors either.

 

Do you have any suggestions?

Thanks

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[KwabenaOwusu]

I had to simplify everything and create a codepen to illustrate the issue.

 

This is my codepen: 

See the Pen rNopGXj by KwabenaOwusu (@KwabenaOwusu) on CodePen

 

Issue:

It seems SmoothScroller css is the main issue or I am missing something.

Code works fine but the element to be revealed to pushed to the top of the page and becomes invisible because the it has "position:absolute".

 

As far as I can see SmoothScroller container is also assigned "position:absolute".

 

How do I solve the issue.

 

My goal:

Element to be revealed should  show up in the current scroll position.

 

Thanks very much in advance

 

[mvaneijgen]

Hi @KwabenaOwusu

 

Would setting position: fixed; on the detail container work in this case? 

 

See the Pen MWLEBdw?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[KwabenaOwusu]

@mvaneijgen: Thanks very much.

It seems to work. At least on codepen.

I will try on my wordpress installation.

[mvaneijgen]

Great! Hope it fixes your issue!

 

If I would build this I would wrap everything in to a section and make everything relative to this section that way everything is contained to just one parent, makes it easier to move things around on the page. 

 

Again, hope it helps and happy tweening! 

[KwabenaOwusu]

Hey @mvaneijgen, unfortunately position:fixed didn't solve the issue.

 

I am trying to understand what you are proposing.

 

Obviously all content is wrapped in "smoother-wrapper" ->"smooth-content"

 

In a container named " preview" I have those clickable elements which animate using Flip to  show and hide "details".

"Preview" and "details" are separate containers.

 

You mean I should put "details" inside of "preview"?

 

Thanks .

[mvaneijgen]

Personally when I build something I see everything as a block and all content that belongs to that block is inside its section.

 

14 minutes ago, KwabenaOwusu said:

In a container named " preview" I have those clickable elements which animate using Flip to  show and hide "details".

"Preview" and "details" are separate containers.

 

So my proposal would be create a container called #myGallery and make all the content relative to that element, that way everything is contained. 

 

I'm not sure what it is that is not working, because in codepen everything seems fine. 

 

See the Pen MWLEBdw?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen