MichelC Posted February 13 Share Posted February 13 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. Link to comment Share on other sites More sharing options...
GSAP Helper Posted February 13 Share Posted February 13  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. ✅ Link to comment Share on other sites More sharing options...
MichelC Posted February 13 Author Share Posted February 13 Will try to create a CodePen tomorrow to see if I can reproduce the problem.. Â 1 Link to comment Share on other sites More sharing options...
mvaneijgen Posted February 13 Share Posted February 13 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 1 Link to comment Share on other sites More sharing options...
MichelC Posted February 13 Author Share Posted February 13 You are absolutely right.. I will look at your tip and try to create a codepen.. Thanks for effort so-far. Â M. Link to comment Share on other sites More sharing options...
MichelC Posted February 15 Author Share Posted February 15 You are absolutely right.. I will look at your tip and try to create a codepen.. Thanks for effort so-far. Â M. Link to comment Share on other sites More sharing options...
MichelC Posted February 15 Author Share Posted February 15 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! Link to comment Share on other sites More sharing options...
mvaneijgen Posted February 15 Share Posted February 15 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now