Problem with the ScrollTrigger application on the WordPress site

[Omran AlAssad]

I try to apply the following code, but I find that the section after scroll down does not appear
Can someone help?

https://zone4.omranalassad.com/test/

See the Pen WNQqGYV by robbiecren07 (@robbiecren07) on CodePen

[Rodrigo]

Hi @Omran AlAssad and welcome to the GreenSock forums!

 

It's rather difficult to debug or find issues on deployed Wordpress sites.

 

The two options I can offer you is to test the animation without Scroll Trigger. For that purpose give it a long delay so it gives you time to scroll to that position or use a button to start the animation. The other alternative is to include markers in your ScrollTrigger instance in order to see where the start and end points are located.

 

Perhaps a more experienced WordPress user could shed some light into this.

 

Happy Tweening!!!

[Omran AlAssad]

@Rodrigo
I developed my code and it works fine inside localhost, the problem is when I include it inside the Wordpress website.
I recorded the problem ,
https://zone4.omranalassad.com/wp-content/uploads/2022/09/Screen-Recording-2022-09-15-at-10.44.26-AM.mov
can you check and tell me appropriately to solve the problem,

It can be seen (through the browser's developer properties) that the movement is going well
 But we do not see it presented in front of us.

Thanks.

[Cassie]

Hi there - as @Rodrigo mentioned, it's very hard for us to debug a live site.

If it's working in codepen it's not a GSAP issue, the only way to fix this really is to very carefully step through your wordpress site and the codepen and play 'spot the difference' - try and find the inconsistency in the code.

[Omran AlAssad]

Hi  Rodrigo and @Cassie ,

thank you for help ,
 

After searching and checking, I found that the problem is from the
CSS (html,body) 
 

html,
body {
  margin: 0;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  font-family: "Signika Negative", sans-serif, Arial;
}

Where it conflicts with (html, body) of WordPress
Can it be modified to suit WordPress?

I would be grateful for the help,

thanks.

 

[Cassie]

Hey there, you'll likely have to edit your wordpress CSS or use !important