Jitterish sticky element on scroll(Scrollsmoother)

[babis]

Hi guys, i have made a sticky bar( the white one ) in this page http://btr.radial.website/en/roadtrips/tour1/ , but only in chrome the links and the button are shaking as i scroll the page. What might be the problem. The code is this simple one

const innerNavigation = document.querySelector(
			'.inner-navigation__container'
		)
		if (innerNavigation) {
			ScrollTrigger.create({
				trigger: innerNavigation,
				start: 'top 54px',
				endTrigger: '#accomodation',
				toggleClass: 'active',
				pin: true,
				scrub: true,
				pinSpacing: false,
			})
		}

 

[Rodrigo]

Hi,

 

I took a look at your site and you're using GSAP 3.10.4. Please update to the latest version 3.11.3 that was released earlier today and let us know how it goes.

 

If you keep having issues, please provide a minimal demo so we can take a look at it.

 

Happy Tweening!

[babis]

i Cant reproduce the code right now because of the complexity of the structure and dependecies but its similar to this codepen

See the Pen vYjxVQY by babistsour (@babistsour) on CodePen

here the image on the left in green section is also flickering and shaking when the animation is in progress. But it only happens in chrome. IN firefox its ok.

[Rodrigo]

Hi,

 

These are two unrelated situations. The top bar jittering could be solved by updating to the latest version. Also you should try the same code without ScrollSmoother and see if you get the same result. There has been several improvements over the past month in the ScrollSmoother plugin so the latest version should be the first thing to try.

 

The jittering in the elements inside the green block is most likely due to the fact that the element's width is being animated, it's entire layout has to be rendered and it's child element positioned on every width change. In the codepen example you provide, if you comment out the ScrollSmoother part and replace scrub: true with scrub: 1.5 in the ScrollTrigger config, you get a similar result. If you look closely, you can see that the green element's width is also jittery when the scrub animation is completing with or without ScrollSmoother.

 

I assume that the top bar in your site doesn't have a width/height or position (left/right/margin/padding) animation happening as the user scrolls up and down right? If it does I would try using a transform instead.

 

Sorry I can't be of more assistance but given the limitations of what we can do with your live example and the fact that the codepen probably works in a different way, the only advice I can offer is what I can think of.

 

Finally please try to update to the latest version of GSAP, ScrollTrigger and ScrollSoother in your app and see if there is any improvement.

 

Happy Tweening!

[babis]

Hi Rodrigo, thank you for your answers. I put in the navbar a "will-change: transform" and the problem has gone. As  for the green section, i didnt understand the solution. Do you suggest not to animate the width, but something else. Sorry, noob here..

[Rodrigo]

Hi,

 

Yeah, if possible avoid animating the width of an element especially since it will cause it's child elements being re-positioned on each change, plus I'm not completely sure but I think Chrome could be rounding the element's width, even if the styles box in dev tools says otherwise, which would be consistent with the jittering.

If there is no way around it and you have no other choice than animating the width of the element, try to keep the position of the elements inside of it regardless of the width or hide them until the width animation is completed and show them after, perhaps making the width animation shorter.

 

Let us know if you have other questions.

 

Happy Tweening!