Problem with an animation that change on every section

[amirTrujillo]

Hi,
I'm new to GSAP and having trouble with a specific animation, I made a quick simplified (and ugly) pen to demonstrate the problem.
I have two DIV's with separate animation that change on every section, I'm sure there is a cleaner way to do it.
Thank in advance. 

See the Pen GRdxqbX by amir-trujillo (@amir-trujillo) on CodePen.

[Rodrigo]

Hi @amirTrujillo and welcome to the GreenSock forums!

 

Well, this all depends on how you want to display this. If you want your animated elements to be visible and on top of the other three sections as they animate, then yeah what you have in place seems like a good way to do it, unless other user can think of a better way to achieve this. Just be careful with your real setup in terms of your CSS, since I'm assuming that your demo is quite simpler than the real life situation. Thanks by the way for the simple demo ?

 

On the other hand if you want to not show the other three sections as your scroll animation is being played, then maybe a better setup with a position relative, or no position set, and a ScrollTtrigger pin could be the best way. Like I said, this depends on what you're trying to do.

 

Finally thanks for being a Club member and supporting GreenSock! ?

 

Happy Tweening!

[Ravi Renpara]

I am experiencing issues with animations when sections change:

• Sometimes, the animation behaves weirdly during section transitions.
• On mobile devices, when the search bar hides, the entire section layout gets messed up.
• Occasionally, a pinned section does not release, but the next section starts scrolling.

If anyone has a solution to these problems, please help us resolve them. You can check the issues on the following URL : https://ahura.xyz/ratnaakar/

[GSAP Helper]

Hi @Ravi Renpara and welcome to the GSAP Forums!

 

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

 

Also you can try using ScrollTrigger normalizeScroll() to prevent the address bar from hiding:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

 

Or use the ignoreMobileResize config in order to avoid layout shift issues when the address bar shows/hides:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.config()#details

[Ravi Renpara]

Hey @GSAP Helper please checkout this, and let me know if this helps or not.

https://stackblitz.com/edit/stackblitz-starters-s5x64i

[Rodrigo]

Hi,

 

Unfortunately I can't get your demo to run, just a blank screen on the editor's preview 🤷‍♂️

[Ravi Renpara]

On 10/12/2024 at 3:52 AM, Rodrigo said:

Hi,

 

Unfortunately I can't get your demo to run, just a blank screen on the editor's preview 🤷‍♂️

Hey @GSAP Helper Sorry for the inconvenience,
Please check this, and let me know if this helps or not.

https://codesandbox.io/p/sandbox/ratnaakar-h73znw

[Rodrigo]

Hi,

 

There are over 600 lines of just JS code in your demo, that's far too much. We love helping our users but unfortunately we don't have the time resources to provide free general consulting or solving complex issues. I checked your demo on my phone and I stand by GSAP Helper's suggestions:

On 10/8/2024 at 2:11 PM, GSAP Helper said:

Also you can try using ScrollTrigger normalizeScroll() to prevent the address bar from hiding:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

 

Or use the ignoreMobileResize config in order to avoid layout shift issues when the address bar shows/hides:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.config()#details

That should help with the address bar problems, something you haven't implemented.

 

As for this:

On 10/8/2024 at 10:18 AM, Ravi Renpara said:

Sometimes, the animation behaves weirdly during section transitions.

I don't know what you mean, but everything seems normal to me. Maybe there are some steps to reproduce this, something I'm missing.

 

Regarding this:

On 10/8/2024 at 10:18 AM, Ravi Renpara said:

Occasionally, a pinned section does not release, but the next section starts scrolling.

I'm not seeing any pinning issues on Chrome and Firefox on Ubuntu 20 & 22, but you could try with prevent overlaps and see what happens:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#preventOverlaps

 

Also I noticed that you have scrub values on your ScrollTrigger configs, maybe those are creating the feeling of a section remaining when it shouldn't soto speak.

 

Finally as I already mentioned unfortunately we don't have the time resources to go through all your code and see what could be the problem, we offer paid consulting services or you can post in the Jobs & Freelancing forums in order to get help there.

 

Happy Tweening!