DeltaFrog Posted February 18, 2022 Share Posted February 18, 2022 This is the same problem I ran into the last time I tried to do intro animation on a WordPress site, I would love to get over this hurdle quickly as it seems like it should be a simple thing but nobody mentioned it. Here we go.. So everything in my code seems to be correct, no errors, very very simple. I get can the animation to tween correctly in CodePen. However while in WordPress the text box I am targeting to fade in always displays for a quick moment before the GSAP kicks in and tells it to go invisible and then fade in. When the user transitions to the page the user sees the object for a second before the GSAP code kicks in to make the object disappear and fade in which destroys the presentation and the whole point of fading something in. I can not recreate this bug in code pen because its a in WordPress environment specific issue. How do I ensure the object I am targeting does not display before GSAP gets going? Is this done with additional CSS? <script> ;(function(){ //...loop function code - runs over and over again til it is ended let chck_if_gsap_loaded = setInterval (function(){ //...checking to see if GSAP load into window if( window.gsap ) // ...fires my function my_stuff(); //...clear interval loop checking for GSAP clearInterval( chck_if_gsap_loaded ); //...loop check speed }, 500 ); //...my function function my_stuff() { //...Create VAR and point it at custom CSS ID or class name in Elementor so that it can be seen in Javascript let clientTitle_id = document.querySelector( '.clientTitle'); //...Animate custom class or ID gsap.from(clientTitle_id, {duration: 1, x: 60, delay:.5, opacity: 0}); }; })(); </script> Link to comment Share on other sites More sharing options...
elegantseagulls Posted February 18, 2022 Share Posted February 18, 2022 One solution is to set visibility: hidden; on text boxes you want to animate, then animate autoAlpha instead of opacity: gsap.from(clientTitle_id, {duration: 1, x: 60, delay:.5, autoAlpha: 0}); 2 1 Link to comment Share on other sites More sharing options...
Solution OSUblake Posted February 18, 2022 Solution Share Posted February 18, 2022 Hi DeltaFrog, First, why are you using setInterval to check if GSAP is loaded? If your scripts are in the correct order, you shouldn't have to worry about that. Ex... <html> <body> <p>My content</p> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script> <script src="my-animations.js"></script> </body> </html> 9 minutes ago, DeltaFrog said: Is this done with additional CSS? Yep. Set the opacity to 0 in your CSS and then animate in. gsap.fromTo(clientTitle_id, { x: 60 }, { duration: 1, x: 0, delay:.5, opacity: 1 }); 1 Link to comment Share on other sites More sharing options...
OSUblake Posted February 18, 2022 Share Posted February 18, 2022 Also, check out this video. 1 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now