Jump to content
Search Community

image to fullscreen animation glitchy on second time

Reinoud test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.
 
 

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