Jump to content
Search Community

Greensock DIVI Setup: How?

maxyoung test
Moderator Tag

Recommended Posts

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)

  • Like 1
Link to comment
Share on other sites

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

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

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.

  • Like 1
Link to comment
Share on other sites

23 hours ago, Nekiy2 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.

picture.jpg

Link to comment
Share on other sites

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.

picture.jpg

I did not call the script from /style.css/ ...

Optimized-picture02.jpg

Link to comment
Share on other sites

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>

 

  • Like 1
Link to comment
Share on other sites

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

image.thumb.png.d2d9de77f03a6a530641f50e32b9deab.png

 

 

Link to comment
Share on other sites

1 minute ago, hugoyong said:

I have already fixed function.php enqueue, now this occured:-

image.thumb.png.d2d9de77f03a6a530641f50e32b9deab.png

 

 

<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

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

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

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

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>

 

  • Like 1
Link to comment
Share on other sites

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!

  • Like 1
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...