Scrolltrigger issue on Wordpress

[javierh]

Hi.

I´m a begginer with gsap, patience please 😅

Im getting this: https://www.loom.com/share/91ea260b04dc4736a2d544d0288aaf4a

With this code, in Wordpress.
( https://www.jhestudio.com/previo/test2/vinedos/ )

 

Thanks

 

const scrubTl = gsap.timeline({
            scrollTrigger: {
                trigger: '.conth2fijo',
                 start: 'top 1%',
                 end: 'bottom center',
                scrub: 3,
                 pin: true,
                markers: true,
                            
            }
        })

 scrubTl
             
           .to('.h2fijo', {
                     x: 0,
                xPercent: 0,
                                 
            })
                     

[Rodrigo]

Hi @javierh and welcome to the GSAP Forums!

 

Is super hard for us to debug a live production/test site since there is too much content for us to debug and we're not able to fiddle with it, that's why we request a minimal demo, in order to speed up the support process. We do understand that working with wordpress doesn't make creating a small demo  super easy.

 

For what I can see in the live site is that there is a clear layout shift before the markers appear. I would look into that first and see where that's coming from and what's causing it. Also there are reports that using wordpress with elementor sometimes can introduce some styling that interferes with some calculations by ScrollTrigger.

 

Also inspecting the HTML with devtools I saw a couple of things that caught my attention:

1. You're using GSAP and ScrollTrigger 3.12.2, we're currently on version 3.12.5, so I'd recommend you to update to the latest version and see if that helps.
2. You're a jquery sticky plugin. Are you setting the position of a specific element that is being animated with GSAP or pinned with ScrollTrigger to sticky? I'd also try to avoid that.

Finally what you could try is to start removing some parts and bits of your code, maybe wordpress plugins or other stuff and see of that helps somehow.

 

Sorry I can't be of more assistance, but as I mentioned before the constraints that wordpress creates makes it a bit harder for us to give the proper support.

 

Hopefully this helps.

Happy Tweening!

[javierh]

Thanks in advance Rodrigo.

I created Pen: 

See the Pen JjqMEzb by javier-herrera-the-selector (@javier-herrera-the-selector) on CodePen

Clearly is Wordpress, maybe Elementor, compatibility issue.

Tried disabling all plugins but Elementor, but anyway couldnt get it to run prop. on WP; i got exactly the same.

 

 

 

[GreenSock]

One thing that's for sure a problem is that you've got a CSS transition applied to the element you're pinning/animating which totally interferes. I'd recommend writing a CSS rule that removes that.

 

Your CodePen works the way you expected, right? 

[javierh]

Thanks but i dont understand, maybe i must read more before, but i see a section pinned triggered with: .conth2fijo and a class: .h2fijo which make the text to enter, im right?

 

For your question, yes, it works as expected, but in Wordpress still have the issue.

 

Thanks.

[akapowl]

Hello Javier.

As Jack already mentioned, you've got a CSS transition applied to the element that you are pinning with ScrollTrigger.

This right here:



When simply just removing the transform part in the transition rule for the .e-con class, things already didn't jump anymore for me.

Maybe the thread linked below can also help - I sure hope it does. Good luck.
 

 

[javierh]

Thank you very much, it was this transition Jack mentioned, as you said.

This is a default css set by Elementor, just inserted this line: .e-con { transition-property: none !important; } and everything looks fine now.

I dont know if creating a new topic for this, but how can i do for text to be already moving in from right when the section is triggered?

 

 

[Cassie]

Are you asking how to animate text in from the right?

Something like this, give it a go, if you get stuck, make a new thread with a minimal demo showing what you've tried.

gsap.from(".text", {
  xPercent: 200,
  scrollTrigger: {
    trigger: ".section"
    ...
  }
})

 

[akapowl]

45 minutes ago, javierh said:

I dont know if creating a new topic for this, but how can i do for text to be already moving in from right when the section is triggered?

If you want the text to be already tweening before you start pinning the section, you will need to seperate things out into two ScrollTriggers.

One that is just responsible for tweening on the text but does not pin anything - that should have its start whenever you want before the top of your section hits the top of the window.
 

And another one that is just responsible for the pinning and does not have a tween attached - e.g. set up like the one you already have.

Something like what follows below. And indeed, if you have any problems or questions with regard to anything else, it would be best to create a new topic for those alongside a minimal demo.
 

gsap.registerPlugin(ScrollTrigger);

// ST for tweening but not pinning

const scrubTl = gsap.timeline({
  scrollTrigger: {
    trigger: ".conth2fijo",
    start: "top center",
    end: "+=150%",
    scrub: 3,
  }
});

scrubTl.to(".h2fijo", {
  x: 0,
  xPercent: -60
});

// ST for pinning only

ScrollTrigger.create({
  trigger: ".conth2fijo",
  start: "top top",
  end: "+=100%",
  pin: true
})

 

[javierh]

Thank you very much people.