Triggered element is being re-painted at end of the scrolltrigger

[MichelC]

Hi there... pretty new to GSAP Scroll Trigger (what an awesome software btw 😄).. Combined it with Elementor (so, hard to add CodePen).

 

I use a full screen container as trigger element. In this container I animated some colums based on a scrolltrigger. Columns are being showed using scale and autoAlpha. Scroll trigger and animation are working fine but at the end of the ScrollTrigger the whole container is being re-painted on the screen, which gives an annoying flash of the full screen container.

 

JS.

gsap.registerPlugin(ScrollTrigger);

var tl_story = gsap.timeline({
   scrollTrigger: {
    trigger: ".content-scroll",
    start: "-60px top",
    end: "+=80%",
    scrub: true,
    pin: ".content-scroll",
    /*markers: true,*/
    pinSpacing: true
  }
});

 

tl_story.from(".about", {scale: 0.3, autoAlpha: 0, ease: "power4"})        
        .from(".piet", {scale: 0.3, autoAlpha: 0, ease: "power4"},1)
        .from(".vision", {scale: 0.3, autoAlpha: 0, ease: "power4"},2);

 

Markup of the element are all being done by Elementor.

 

I have another full page container with a ScrollTrigger to animate some element and this one is working as expected..

 

If you want to see what I mean: https://www.mdcs.nl/home-gekloond-1397...  It is the Story section that's doing weird..

 

Who puts me on  the right track?

 

Cheers,

Michel.

[GSAP Helper]

 Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[MichelC]

Will try to create a CodePen tomorrow to see if I can reproduce the problem..

 

[mvaneijgen]

Hi @MichelC welcome to the forum!

 

It is hard to say without a minimal demo what is causing this, could be anything in your site and sadly we can't edit the code your live website. 

 

I don't see anything wrong with your GSAP code, so the quickest way to debug is start disabling big chunks of your code base to see if the issue disappears and when it does start enabling small things back in again, until you've found the piece of code that is the culprit. 

 

I see you load bootstrap, this adds scroll-behaviour: smooth; to the html this can cause issues so you could look in to disabling this

 https://stackoverflow.com/questions/75366493/disable-smooth-scroll-in-bootstrap-5-with-html-css-code

 

Maar anders dan dat is het lastig te zeggen, hopelijk vind je de issue snel anders zien we graag een demo om je verder te helpen

[MichelC]

You are absolutely right.. I will look at your tip and try to create a codepen..

Thanks for effort so-far.

 

M.

[MichelC]

You are absolutely right.. I will look at your tip and try to create a codepen..

Thanks for effort so-far.

 

M.

[MichelC]

The bootstrap tip did not help unfortunatly.. I created a codepen with the code, and that works fine.. so its probably a conflict of theme, elementor plugin's, etc.

 

Thanks! 

[mvaneijgen]

Yep themes and plugins like elementor like to add a lot of CSS like transition: all 300ms ease-in; which will conflict when trying to animate things with javascript. 

 

I never use elementor, so I can't advise you want to do, but there is probably a way to disable the CSS it loads or disable transitions on the specific block you're adding. Still try disabling big chunks first and then adding them in bit by bit until it breaks again, then you can pin point what is causing the issue and thus fix it somehow.