Uninteded position while resizing window

[MrBumblebee]

Im new to the whole thing , and Im just learning about gsap. I tried to create sort of parallax like effect , where the parallaxRef elements(those logos) moves left or right  when i scroll up or down. It basically moves those logos horizontally when i scroll. And it works as intended. For the first row of logos , I translate it -30% and using gsap and its scrollTrigger , I translate it to 30% so when i basically at the middle of the container , those logos are relatively at the middle of the container. But when i resize the window , their position just seems to be weird position as shown in picture 2. But when i reload the page , it goes back to its intended position. I dont know if i explained the problem properly. Im using REACT for this. If theres a better way of doing it , it would be awesome too.

1st pic shows the page before resizing the window.
2nd pic shows the page after resizing the window with the logo's position all messed up.
3rd pic is after reloading the page , which seems to correct their position.

 

 const parallaxRef = useRef(null);

    const parallaxRef2 = useRef(null);

   

    const  setupParallaxTriggers = () => {

 

      gsap.to(parallaxRef.current, {

        xPercent: 30,

        scrollTrigger: {

          trigger: '.container',

          scrub: 1,

          start: 'top bottom',

          end: 'bottom top',

          invalidateOnRefresh: true,

          markers:true,

        },

      });

 

      gsap.to(parallaxRef2.current, {

        xPercent: -30,

        scrollTrigger: {

          trigger: '.container',

          scrub: 1,

          start: 'top bottom',

          end: 'bottom top',

          invalidateOnRefresh: true,

          markers:true,

          start: '40% bottom',

        },

      });

    };

 

    useEffect(() => {

      setupParallaxTriggers();

    }, [])

 

    return(

        <div style={{margin:'100rem 0rem'}}>

        <section className='container'>

          <h1>DEMO</h1>

          <div className='box' style={{transform:'translateX(-30%)'}} ref={parallaxRef}>

            <span className='level'>

              <p>Level</p>

              <p>Intermediate</p>

            </span>

            <div><img src={html} alt="html"/></div>

            <div><img src={css} alt="css"/></div>

            <div><img src={javascript} alt="js"/></div>

            <div><img src={react} alt="react"/></div>

          </div>

         

           

          <div className='box' style={{marginTop:'10rem',transform:'translateX(30%)'}} ref={parallaxRef2}>

           

            <div><img src={node} alt="node"/></div>

            <div><img src={express} alt="express"/></div>

            <div><img src={mongodb} alt="mongodb"/></div>

            <span className='level'>

              <p>Level:</p>

              <p>Beginner</p>

            </span>

          </div>

        </section>

        </div>

    )

}

 

See the Pen gOyJoqa by RanjitXtha (@RanjitXtha) on CodePen

[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 dependencies 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. ✅

[GSAP Helper]

Hi there! I see you're using React -

Proper cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

 

Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down.

 

Here is how it works:

const container = useRef(); // the root level element of your component (for scoping selector text which is optional)

useGSAP(() => {
  // gsap code here...
}, { dependencies: [endX], scope: container }); // config object offers maximum flexibility

Or if you prefer, you can use the same method signature as useEffect():

useGSAP(() => {
  // gsap code here...
}, [endX]); // simple dependency Array setup like useEffect()

This pattern follows React's best practices.

 

We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/

 

If you still need help, here's a React starter template that you can fork to create a minimal demo illustrating whatever issue you're running into. Post a link to your fork back here and we'd be happy to take a peek and answer any GSAP-related questions you have. Just use simple colored <div> elements in your demo; no need to recreate your whole project with client artwork, etc. The simpler the better. 

[MrBumblebee]

@GSAP HelperI apologize. Now , I have included the codepen for the animation i wanted to implement. It works but when i resize the window , those green divs just seem to go out of the container(u can just resize this window). But when i refresh the page(or rerun the code) , the green div seems to be in correct place. Its kind of hard to explain whats happening. I hope the codepen gives some insight. The problem seems inconsistent too.

 

[mvaneijgen]

Hi @MrBumblebee welcome to the forum!

 

The most powerful tool in GSAP is the timeline! You can add multiple tweens on it and  if you got your desired animation you can let ScrollTrigger control that whole timeline. You had a .to() tween, but you needed to set CSS to get your boxes in place it is always best to let GSAP handle all the transforms. So in this case (this is true for most animations) use your CSS to set your elements to be in the position where you want them to end when the animation is done, then you can use a .from() to have GSAP put them at the correct place. As you can see this now works perfectly (on any screen size). You can see that I've moved your ScrollTrigger logic to the timeline and it is commented out you can enable it to see how this would work on scroll. 

 

I’ve placed some comments in your JS/CSS to better explain things and also below some notes that are important to understand,  please be sure to read through them!

 

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ Hope it helps and happy tweening! 

 

See the Pen JjVqpGq?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

 

Please also read the following:

 

Quote

You should never apply CSS transitions to anything that JavaScript is animating because not only is it horrible for performance, but it'll prolong all the effects because whenever JavaScript updates a value (which GSAP typically does 60 times per second), the CSS transitions interrupt and say "NOPE! I won't allow that value to be changed right now...instead, I'm gonna slowly make it change over time". So it disrupts things, adds a bunch of load to the CPU because you've now got CSS and JS both fighting over the same properties, but let's say you've got a 1-second tween and the CSS transitions are set to take 1000ms...that means what you intended to take 1 second will actually take 2 seconds to complete. 

Quote

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

[MrBumblebee]

@mvaneijgenThank u for the reply. I followed the points u mentioned and was finally able to solve the issue.
I used timeline and used fromTo to state the intitial and final xPercent instead of using the transform in css. I guess css and gsap conflicted or something.
Now it seems to maintain its position relative to its container even when i resize the window. 

 

 

[mvaneijgen]

You still have transition: all 0.25s ease; in your css which is conflicting with your JavaScript animations. highly recommend removing this and never to use transition: all 0.25s ease! Just change all to the property you want to transition eg transition: opacity 0.25s ease;

 

but glad you’ve solved your issue. Happy tweeting