maxyoung Posted July 23, 2020 Share Posted July 23, 2020 How to setup Greensock in DIVI themes? Link to comment Share on other sites More sharing options...
_Greg _ Posted July 23, 2020 Share Posted July 23, 2020 Hi! Please check this page https://greensock.com/docs/v3/Installation DIVI its wordpress theme? You can place gsap to your site (or use child theme) like regular js script 1 Link to comment Share on other sites More sharing options...
maxyoung Posted July 23, 2020 Author Share Posted July 23, 2020 7 minutes ago, Nekiy2 said: Hi! Please check this page https://greensock.com/docs/v3/Installation DIVI its wordpress theme? You can place gsap to your site (or use child theme) like regular js script Yes DIVI is based on wordpress theme. I am confused, because I saw some forum post mentioned about functions.php Link to comment Share on other sites More sharing options...
_Greg _ Posted July 23, 2020 Share Posted July 23, 2020 2 minutes ago, hugoyong said: Yes DIVI is based on wordpress theme. I am confused, because I saw some forum post mentioned about functions.php Yes, many theme developers load js with functions.php on wordpress, better check DIVI documentation how to add custom scripts (i think better use child theme for this) 1 Link to comment Share on other sites More sharing options...
maxyoung Posted July 24, 2020 Author Share Posted July 24, 2020 18 hours ago, Nekiy2 said: Yes, many theme developers load js with functions.php on wordpress, better check DIVI documentation how to add custom scripts (i think better use child theme for this) I uploaded gsap.min.js into my child theme and call the script tag file in my webpage. Greensock animation is still not working on my webpage. I also check Dev Tools to look for any errors, there were no errors displayed. <script src="http://yoursite.com/wp-content/themes/yourchildtheme/js/gsap.min.js"></script> Animation is not working, what should I do next? Link to comment Share on other sites More sharing options...
GreenSock Posted July 24, 2020 Share Posted July 24, 2020 http://yoursite.com/wp-content/themes/yourchildtheme/js/gsap.min.js - that's not the actual URL you used, is it? I think it should be more like https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js If you still need some help, please provide a URL where we can check your page and make sure it is indeed loading GSAP. I suspect it isn't. This sounds more like a question for the DIVI folks, not something we can help with. Link to comment Share on other sites More sharing options...
maxyoung Posted July 24, 2020 Author Share Posted July 24, 2020 16 minutes ago, GreenSock said: http://yoursite.com/wp-content/themes/yourchildtheme/js/gsap.min.js - that's not the actual URL you used, is it? I think it should be more like https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js If you still need some help, please provide a URL where we can check your page and make sure it is indeed loading GSAP. I suspect it isn't. This sounds more like a question for the DIVI folks, not something we can help with. I am also asking DIVI support team to help me out. They are offline currently. I guess I just need to wait for DIVI support team to reply. Thanks Jack. 1 Link to comment Share on other sites More sharing options...
_Greg _ Posted July 24, 2020 Share Posted July 24, 2020 Check documentation for DIVI You can add to functions.php https://divi.space/tutorials/how-to-add-javascript-and-jquery-to-divi/#:~:text=To begin%2C navigate to Divi,code and click Save Changes. Or this link https://www.elegantthemes.com/blog/divi-resources/best-practices-for-using-external-javascript-snippets-with-divi Link to comment Share on other sites More sharing options...
maxyoung Posted July 25, 2020 Author Share Posted July 25, 2020 23 hours ago, Nekiy2 said: Check documentation for DIVI You can add to functions.php https://divi.space/tutorials/how-to-add-javascript-and-jquery-to-divi/#:~:text=To begin%2C navigate to Divi,code and click Save Changes. Or this link https://www.elegantthemes.com/blog/divi-resources/best-practices-for-using-external-javascript-snippets-with-divi not sure why DIVI is calling the script file from /style.css/ , when I am calling the script from from child theme's js folder, which is where i placed the gsap.min.js file. Link to comment Share on other sites More sharing options...
maxyoung Posted July 25, 2020 Author Share Posted July 25, 2020 Just now, hugoyong said: not sure why DIVI is calling the script file from /style.css/ , when I am calling the script from from child theme's js folder, which is where i placed the gsap.min.js file. I did not call the script from /style.css/ ... Link to comment Share on other sites More sharing options...
Ihatetomatoes Posted July 25, 2020 Share Posted July 25, 2020 Hi @hugoyong, I am not familiar with Divi, but there is a standard way how to include custom js in your theme. Official WP documentation on including JS https://developer.wordpress.org/themes/basics/including-css-javascript/ To ensure compatibility and prevent conflicts it is recommended to load custom js from your functions.php file. This will make sure that all js files are loaded in the right order. On your screenshot above it should probably be something like this: <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js" /> <script type="text/javascript"> gsap.to(...); </script> 1 Link to comment Share on other sites More sharing options...
maxyoung Posted July 25, 2020 Author Share Posted July 25, 2020 1 hour ago, Ihatetomatoes said: Hi @hugoyong, I am not familiar with Divi, but there is a standard way how to include custom js in your theme. Official WP documentation on including JS https://developer.wordpress.org/themes/basics/including-css-javascript/ To ensure compatibility and prevent conflicts it is recommended to load custom js from your functions.php file. This will make sure that all js files are loaded in the right order. On your screenshot above it should probably be something like this: <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js" /> <script type="text/javascript"> gsap.to(...); </script> I have already fixed function.php enqueue, now this occured:- Link to comment Share on other sites More sharing options...
maxyoung Posted July 25, 2020 Author Share Posted July 25, 2020 1 minute ago, hugoyong said: I have already fixed function.php enqueue, now this occured:- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js" /></script> <script src="http://fundingsnetwork.com/wp-content/themes/Divi/js/gsap.min.js"></script> <script> gsap.to("h2.title", {duration: 1, opacity: 0.3}); gsap.to(".box", {duration: 2, x: 300}); gsap.to(".green", {duration: 3, rotation: 360, scale: 0.5}); </script> <div class="box orange"></div> <div class="box grey"></div> <div class="box green"></div> Link to comment Share on other sites More sharing options...
Ihatetomatoes Posted July 25, 2020 Share Posted July 25, 2020 Make sure that the elements you are trying to animate are on the page. I can't see .ball or h2.title in you screenshot above. Link to comment Share on other sites More sharing options...
maxyoung Posted July 25, 2020 Author Share Posted July 25, 2020 29 minutes ago, Ihatetomatoes said: Make sure that the elements you are trying to animate are on the page. I can't see .ball or h2.title in you screenshot above. <script src="http://fundingsnetwork.com/wp-content/themes/Divi/js/gsap.min.js"> gsap.to(".box", {duration: 2, x: 300}); gsap.to(".green", {duration: 3, rotation: 360, scale: 0.5}); </script> <div class="box orange"></div> <div class="box grey"></div> <div class="box green"></div> Link to comment Share on other sites More sharing options...
maxyoung Posted July 25, 2020 Author Share Posted July 25, 2020 7 minutes ago, hugoyong said: <script src="http://fundingsnetwork.com/wp-content/themes/Divi/js/gsap.min.js"> gsap.to(".box", {duration: 2, x: 300}); gsap.to(".green", {duration: 3, rotation: 360, scale: 0.5}); </script> <div class="box orange"></div> <div class="box grey"></div> <div class="box green"></div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js" /></script> <script src="http://fundingsnetwork.com/wp-content/themes/Divi/js/gsap.min.js"></script> <script> gsap.to(".box", {duration: 2, x: 300}); gsap.to(".green", {duration: 3, rotation: 360, scale: 0.5}); </script> <div class="box orange"></div> <div class="box grey"></div> <div class="box green"></div> Link to comment Share on other sites More sharing options...
GreenSock Posted July 25, 2020 Share Posted July 25, 2020 It looks like the problem is that you've got your GSAP code ABOVE your actual DOM elements. So when you try to animate ".box", for example, it doesn't even exist yet! Make sure your GSAP code is AFTER the DOM elements you're having it alter. 1 Link to comment Share on other sites More sharing options...
maxyoung Posted July 26, 2020 Author Share Posted July 26, 2020 22 hours ago, GreenSock said: It looks like the problem is that you've got your GSAP code ABOVE your actual DOM elements. So when you try to animate ".box", for example, it doesn't even exist yet! Make sure your GSAP code is AFTER the DOM elements you're having it alter. Any examples how i should ensure GSAP code is AFTER the DOM element? Thanks Jack Link to comment Share on other sites More sharing options...
GreenSock Posted July 26, 2020 Share Posted July 26, 2020 Sure, for example, do this: <div class="box orange"></div> <div class="box grey"></div> <div class="box green"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js" /></script> <script> gsap.to(".box", {duration: 2, x: 300}); gsap.to(".green", {duration: 3, rotation: 360, scale: 0.5}); </script> Do NOT do this: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js" /></script> <script> gsap.to(".box", {duration: 2, x: 300}); gsap.to(".green", {duration: 3, rotation: 360, scale: 0.5}); </script> <div class="box orange"></div> <div class="box grey"></div> <div class="box green"></div> 1 Link to comment Share on other sites More sharing options...
maxyoung Posted July 28, 2020 Author Share Posted July 28, 2020 On 7/27/2020 at 1:01 AM, GreenSock said: Sure, for example, do this: <div class="box orange"></div> <div class="box grey"></div> <div class="box green"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js" /></script> <script> gsap.to(".box", {duration: 2, x: 300}); gsap.to(".green", {duration: 3, rotation: 360, scale: 0.5}); </script> Do NOT do this: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js" /></script> <script> gsap.to(".box", {duration: 2, x: 300}); gsap.to(".green", {duration: 3, rotation: 360, scale: 0.5}); </script> <div class="box orange"></div> <div class="box grey"></div> <div class="box green"></div> Jack, I finally got it working on DIVI. A Big Thank You for your help. Really appreciate it! 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