image to fullscreen animation glitchy on second time

[Reinoud 4 Likes (Newbie)]

Hi Gsappers!

Been a while since I could resume working with Gsap. Been looking forward to making cool things with it.

I'm just a bit stuck now. I made an animation that gives a row full-height and width, along with an image (as background) when you click a button, I thought it would be a cool way make popup.
The first time it works fine, but when you click the button a second or third time everything starts to go very glitchy.
I think in may have something to with me adding the timline  and not removing it fromt he "master", I tried a few things but with no succes...

I've been looking around on this forum and found a few topics with the same problem, most of the answers point to

See the Pen yLyvavQ by yasirhaleem (@yasirhaleem) on CodePen

, But this one clones the body, this creates a whole number of other problems when working in Wordpress... 
Can someone help me out? It's the last step to finishing this animation, at least I hope it is...

See the Pen NWrejBV by REDDSTONE (@REDDSTONE) on CodePen

[ZachSaucier 7,133 Likes (Superhero)]

2 hours ago, Reinoud said:

But this one clones the body

No, it doesn't. It clones the clicked element to the body. Quite different. 

Most likely whatever issues it's causing in your WordPress environment is because of some CSS that you have. Intrinsically WordPress is no different than non-WordPress: all the core technology and approach is the same. I'm sure if you made a minimal demo in your WordPress environment it'd perform the same way as that demo. Most likely you're wasting time coming up with your own approach when what you should be doing is debugging why the standard approach isn't working  

 

Trying to keep the element in the same position on scroll would be much easier with fixed positioning as the first demo that you included does. Using a clone prevents other elements from being moved around when that positioning is changed. Additionally we recommend including the duration in the vars parameter, recommend using .set() instead of a tween with zero duration. Also note that in your second pen, even if things were setup correctly, the close animation could be incorrect if any adjustments to the screen size or scrolling occurred. 

[Reinoud 4 Likes (Newbie)]

14 minutes ago, ZachSaucier said:

No, it doesn't. It clones the clicked element to the body. Quite different. 

Most likely whatever issues it's causing in your WordPress environment is because of some CSS that you have. Intrinsically WordPress is no different than non-WordPress: all the core technology and approach is the same. I'm sure if you made a minimal demo in your WordPress environment it'd perform the same way as that demo. Most likely you're wasting time coming up with your own approach when what you should be doing is debugging why the standard approach isn't working  

 

Trying to keep the element in the same position on scroll would be much easier with fixed positioning as the first demo that you included does. Using a clone prevents other elements from being moved around when that positioning is changed. Additionally we recommend including the duration in the vars parameter, recommend using .set() instead of a tween with zero duration. Also note that in your second pen, even if things were setup correctly, the close animation could be incorrect if any adjustments to the screen size or scrolling occurred. 

Thnks! You're absolutely right, I've been wasting a lot of time. I made this one a while ago but never finished it. I figured that I based it on some existing one back then, but now I think I made it from scratch to get the hang of Gsap, did not work 🙃.

The Wordpress theme we use can be a pain, they add a lot of CSS by default with "!important", which can make it very hard to override.

Thank you for all the tips. I'll try remember on my coming projects.