WEBFLOW + GSAP HELP!!!

[Veljko Vucicevic]

Hey guys, I finished my portfolio website, and going through it, I notice one error. 

As you can see, there is a strange movement on the left card. On the first visit to the website, everything is normal, but once you click the FAQ item, it moves to the left and shrinks, and if you continuously click the FAQ item, it flickers. I am 100% sure this is GSAP code. I use Smooth Scroller, and I pin the left card. When I remove the GSAP code and go with sticky on the left card, everything works normally.

What could be the problem? Here is the read-only link https://preview.webflow.com/preview/veljko-portfolio-bb1f89?utm_medium=preview_link&utm_source=designer&utm_content=veljko-portfolio-bb1f89&preview=2e29e1d3721c84bd8fed760aba33f39c&workflow=preview and website https://veljkov.me/

[Rodrigo]

Hi @Veljko Vucicevic and welcome to the GSAP Forums!

 

Most likely you're calling ScrollTrigger.refresh() when the accordion item is expanded/collapsed, right? If so this is kind of expected since the left-side element is being pinned so the ScrollTrigger instance that handles that is refreshed as well.

 

I could recommend two options.

1. Since the content in your accordion is not a lot (3 lines of text in the largest one) you could add that extra space after that section and forget about calling the refresh method, this is the simplest approach and since your right column already has some space between elements so a small extra space before and after that section (so it looks even) shouldn't create a visual problem.
2. It seems that you only have one element/section after the accordion that uses ScrollTrigger. You can store that animation in a variable and then just refresh that particular ScrollTrigger:

   const t = gsap.to(target, {
     // Tween config here
     scrollTrigger: {
       // ScrollTrigger config here
     },
   });
   
   // In the accordion method
   const expand = () => {
     gsap.to(element, {
       // ...
       onComplete: () => t.scrollTrigger.refresh(),
     });
   };

Hopefully this helps

Happy Tweening!

[Veljko Vucicevic]

The first method does work. I just commented out this part of the code in the accordion js

 const refresh = () => {
        tl.invalidate();
        //if (typeof ScrollTrigger !== "undefined") ScrollTrigger.refresh();
      };

THANK YOU!