Using gsap in a Worpress theme. (Divi)

[Reinoud]

Hi everyone!

 

(I can't make a codepen 'cause the problem is in Wordpress).

 

I've been using GSAP a lot lately and it has made our websites a lot cooler!

 

My employer uses the Wordpress theme Divi (https://www.elegantthemes.com/), this way we have a web designer that can make a website quickly and whenever Divi lacks something the designer wants, I come in and make it work within Divi.

 

So lately I've been adding a lot of GSAP animations and they work perfectly, But I've stumbled upon a problem. The Divi theme itself also offers some scroll effects, like fading in and out or rotating or scaling and so on. I had made this animation https://code.reddstone.nl/hover-effecten/hover-in-mijn-broekje/ and it works pretty well, but now that we added it to a website we're building that also uses Divi's scroll effects, those scroll effects stopped working. 

 

I think Divi also uses GSAP or something very simular and my timeline is stopping Divi's from working. How can I make sure there's no conflict between the animations? 

 

I know it's not much to go on, but I hope someone can help me with it.

 

Here's my code. 

 

let tl = gsap.timeline();
  
  var image = $(".image-div");
  window.addEventListener("mousemove", moveImages);
  
  function moveImages(e) {
    var xMove = e.clientX / 35;
    var yMove = e.clientY / 35;
    
    TweenLite.to(".layer-1", 0.2, {
      x: xMove,
      y: yMove
    });
    TweenLite.to(".layer-2", 0.8, {
      x: xMove,
      y: yMove
    });
  }
  
  gsap.set(".layer-1", {autoAlpha: 0, scale: 2});
  gsap.set(".layer-2", {autoAlpha: 0, scale: 2});
  
  tl.to(".layer-1", {duration: 2.5, autoAlpha: 1, scale:1})
  tl.to(".layer-2", {duration: 2, autoAlpha: 1, scale: 1, delay: -1.5})

 

[Ihatetomatoes]

Hi, really hard to debug this blind, there is a lot of other scripts that load on the page.

 

What error are you getting the console if any? The issue could be the order in which your scripts are loading and how you are including them in DIVI.

 

Try the standard way of debugging javascript:

- add breakpoints to your code

- console log objects and elements

 

As you can understand this forum is dedicated to GSAP and not many people here have any experience with DIVI.

[Reinoud]

20 minutes ago, Ihatetomatoes said:

Hi, really hard to debug this blind, there is a lot of other scripts that load on the page.

 

What error are you getting the console if any? The issue could be the order in which your scripts are loading and how you are including them in DIVI.

 

Try the standard way of debugging javascript:

- add breakpoints to your code

- console log objects and elements

 

As you can understand this forum is dedicated to GSAP and not many people here have any experience with DIVI.

 

Hi, thank you for answering! 

I knew from the start when asking this it was a long shot. The page I added isn't the one with the problems, I don't know why I only added the page with the animation...
This is the page with the problem https://zuidkantutrecht.nl/ (password = zuidkant) 
You'll see 3 images straight away. The bottom left one, should start spinning when scroll (this won't be the final animation, but it was the most obvious for testing).

I didn't get console errors, I really wished I did, that way I could've tried some solutions myself.
And it's the Divi animation that's not working. So there's no changing the code in that part. 

 

[Ihatetomatoes]

First of all the new GSAP3 syntax is this, there are some tweens using an old syntax.

 

gsap.to(".layer-1", {
  duration: 0.2,
  x: xMove,
  y: yMove
});

I looked at the code and there is a lot going on. 

 

When you say: The bottom left one, should start spinning when scroll.

 

Which plugin should make the image spin? Some build in DIVI code?

[Reinoud]

1 minute ago, Ihatetomatoes said:

First of all the new GSAP3 syntax is this, there are some tweens using an old syntax.

 

gsap.to(".layer-1", {
  duration: 0.2,
  x: xMove,
  y: yMove
});

I looked at the code and there is a lot going on. 

 

When you say: The bottom left one, should start spinning when scroll.

 

Which plugin should make the image spin? Some build in DIVI code?

 

 

Okay, thnks I'll change it. I'm new to GSAP so I never know if it's old code or just syntax I haven't seen before. 

And sorry for being vague: Of the first three images you see, the bottom right(!) one should spin when you scroll. This is a build in "scroll-effect" from Divi. 

 

[ZachSaucier]

3 hours ago, Reinoud said:

I think Divi also uses GSAP or something very simular and my timeline is stopping Divi's from working. How can I make sure there's no conflict between the animations? 

Sounds like something you should ask about in the Divi community or support  

 

Let us know if you have GSAP questions and we'll do our best to help!

[Reinoud]

3 minutes ago, ZachSaucier said:

Sounds like something you should ask about in the Divi community or support  

 

Let us know if you have GSAP questions and we'll do our best to help!

 

You're very right, but if you've ever asked Divi for help, you'll know you have a better change off making a racoon understand quantum physics, than getting a helpful answer. 

So I was hoping by some miracle someone here could point me in the right direction

[ZachSaucier]

1 minute ago, Reinoud said:

if you've ever asked Divi for help, you'll know you have a better change off making a racoon understand quantum physics, than getting a helpful answer. 

Sorry to hear that! 

 

1 minute ago, Reinoud said:

I was hoping by some miracle someone here could point me in the right direction

It's possible that someone can drop in and help. We'll see  

[Visual-Q]

Might be worth turning off the gsap on the element  and verifying that the divi animation is working ok and examine exactly what it does.

 

Assuming you mean the red and white building you can see gsap applying the transform (translate...) if you have another framework applying transform(rotate) inline would gsap overwrite the entire transform. i.e. erase the the rotation? 

 

Possible you might also get around a conflict applying gsap and divi animations to separate elements i.e. one on a parent the other on a child.

 

[Visual-Q]

I did a  bit of digging divi scroll animations appear to control css animations, they do not inline styles like gsap. So to answer one question they don't use gsap.

 

If you examine some of the animations on the page from divi  with the inspector, it appears a body data element linked to scroll position is controlling the progress of css animations. I don't see this occurring on the elements on your page. The data scroller is present on the body on your page but the animation css does not appear to be attached to the element you want to animate.

 

https://www.divithemeexamples.com/add-motion-scroll-effects-to-divi/#:~:text=Divi Scroll Effects are a,up and down the page.

 

Example: the third d that rotates on scroll this is the controlling css:

 

body[data-scroll-step="23"] .et_pb_image_2 {

transform: translateX(-8px) rotate3d(0,0,1,15.131deg);   //scrolling actually changes these values based on a data item added to the body

transition: transform 200ms linear;}

 

Now that we know what divi does it may point you in the right direction.

[Reinoud]

14 hours ago, Visual-Q said:

Now that we know what divi does it may point you in the right direction.

 

 

Thank you for your research. 
And again sorry for the confusion. The designer kept working on the page, so he changed the images and their position. 

 

Nonetheless, thank you for your research. I hope I can find a way to work around the Divi animations, but it seems like that's going to be pretty difficult.

The web-designers prefers to keep being able to use the Divi animations, but I think it's much easier to just extend the GSAP animation.