Parallax

[pattocheu]

Hello everyone,

 

I have a slight trembling on my images when scrolling, and I'm not sure if it's related to my local environment (CSS, etc.) or an implementation issue with ScrollTrigger.

 

On my CodePen, I don't see the effect that I'm experiencing locally on my page.

 

Thank you.

See the Pen yLwyywa by pattocheu (@pattocheu) on CodePen

[Rodrigo]

Hi,

 

Indeed if the problem can't be replicated in codepen, then most likely is something else in your local setup.

 

A few pointers:

• Be sure to optimize your images as much as possible so it's easier on the browser to render them.
• Avoid long and slow animations, those normally are harder on the browser as well.
• Since you're tweening the Y property (transform) try using will-change: transform on the elements you are animating:

  .parallax img {
    /*...*/
    will-change: transform;
  }

Performance is a deep topic and a 99% of the times it boils down to browser rendering rather than a GSAP issue.

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

If all of that fails, you could also check to see if ScrollTrigger.normalizeScroll(true); helps. It kinda sounds like maybe it's a synchronization thing between the main thread and scrolling thread (browser thing). 

[pattocheu]

Thank you for this information.

 

In connection with this post and in order to master performance, is there any benefit to destroying timelines and  clearProps once they are no longer in use and, for instance using onComplete()?

 

For exemple with my code : 

 

  animationsTitle() {
    this.elements.title.forEach(title => {
      this.splitTextToSpans(title);
      const tl = gsap.timeline({ 
        delay: this.delayIn,
        onComplete: () => {
          tl.kill();
          gsap.set(title.querySelectorAll('.word'), { clearProps: "all" });
        }});
      gsap.set(title.querySelectorAll('.word'), { yPercent: 103 });
      tl.to(title.querySelectorAll('.word'), {
        yPercent: 0,
        duration: 0.9,
        ease: 'power4.inOut',
        stagger: 0.05
      });
    })
  }

Thank you.

[GreenSock]

1 hour ago, pattocheu said:

is there any benefit to destroying timelines and  clearProps once they are no longer in use

Definitely not. That'd actually hurt performance slightly (not that you'd ever notice). It's just wasteful - timelines already make themselves eligible for garbage collection once they complete anyway, and leaving CSS properties on an element doesn't "cost" anything. The only reason to clear props is if those inline properties are somehow interfering with something or keeping your element from displaying the way you wanted.