Problem when changing browser screen width

January 3, 2025

if (window.innerWidth >= 1280) {
	gsap.registerPlugin(ScrollTrigger)

	initGSAPAnimations()

	window.addEventListener('resize', () => {
		ScrollTrigger.getAll().forEach(trigger => trigger.kill())
		initGSAPAnimations()
		ScrollTrigger.refresh()
	})

	function initGSAPAnimations() {
		gsap.to('.hero', {
			scale: 0.7,
			scrollTrigger: {
				trigger: '.two-block',
				start: 'top-=100 50%',
				end: 'bottom 100%',
				scrub: 2,
				// markers: true,
			},
		})

		gsap.from('.box-two-block:nth-child(odd)', {
			x: 1800,
			scrollTrigger: {
				trigger: '.hero',
				start: 'top start',
				end: 'bottom-=100 end',
				scrub: 2,
				// markers: true,
			},
		})

		gsap.from('.box-two-block:nth-child(even)', {
			x: -1800,
			scrollTrigger: {
				trigger: '.hero',
				start: 'top start',
				end: 'bottom-=100 end',
				scrub: 2,
				// markers: true,
			},
		})

		gsap.to('.two-block', {
			scale: 0.7,
			scrollTrigger: {
				trigger: '.about',
				start: 'top 50%',
				end: 'bottom 100%',
				scrub: 2,
				// markers: true,
			},
		})

		gsap.from('.about__video-holder', {
			scale: 0.5,
			scrollTrigger: {
				trigger: '.about',
				start: 'top-=380 50%',
				end: 'bottom-=180 100%',
				scrub: 2,
				// markers: true,
			},
		})

		gsap.from('.about__title-box .title-box__title', {
			scale: 0.5,
			scrollTrigger: {
				trigger: '.about',
				start: 'top-=380 50%',
				end: 'bottom-=180 100%',
				scrub: 2,
				// markers: true,
			},
		})

		gsap.from('.about__title-box .title-box__text-holder', {
			scale: 0.5,
			scrollTrigger: {
				trigger: '.about',
				start: 'top-=380 50%',
				end: 'bottom-=180 100%',
				scrub: 2,
				// markers: true,
			},
		})

		gsap.from('.about__item', {
			x: 2200,
			duration: 1.2,
			stagger: 0.3,
			ease: 'power3.out',
			scrollTrigger: {
				trigger: '.about',
				start: 'top 20%',
				end: 'bottom 20%',
				toggleActions: 'play reverse play reverse',
				// markers: true,
			},
		})

		gsap.to('.about', {
			scale: 0.7,
			scrollTrigger: {
				trigger: '.fixtures',
				start: 'top 50%',
				end: 'bottom 100%',
				scrub: 2,
				// markers: true,
			},
		})

		gsap.from('.fixtures__title-box .title-box__title', {
			opacity: 0,
			scrollTrigger: {
				trigger: '.fixtures',
				start: 'top-=100 50%',
				end: 'bottom 100%',
				scrub: 2,
				// markers: true,
			},
		})

		gsap.from('.fixtures-slider', {
			x: 1800,
			scrollTrigger: {
				trigger: '.fixtures',
				start: 'top-=150 50%',
				end: 'bottom-=50 100%',
				scrub: 2,
				// markers: true,
			},
		})

		gsap.to('.fixtures', {
			scale: 0.7,
			scrollTrigger: {
				trigger: '.services',
				start: 'top 50%',
				end: 'bottom 100%',
				scrub: 2,
				// markers: true,
			},
		})

		gsap.from('.services__title-box .title-box__title', {
			opacity: 0,
			scrollTrigger: {
				trigger: '.services',
				start: 'top-=250 50%',
				end: 'bottom-=150 100%',
				scrub: 2,
				// markers: true,
			},
		})

		gsap.from('.item-services:nth-child(odd)', {
			x: 1800,
			opacity: 0,
			scrollTrigger: {
				trigger: '.fixtures',
				start: 'top start',
				end: 'bottom-=100 end',
				scrub: 2,
				// markers: true,
			},
		})

		gsap.from('.item-services:nth-child(even)', {
			x: -1800,
			opacity: 0,
			scrollTrigger: {
				trigger: '.fixtures',
				start: 'top start',
				end: 'bottom-=100 end',
				scrub: 2,
				// markers: true,
			},
		})

		gsap.to('.services', {
			scale: 0.7,
			scrollTrigger: {
				trigger: '.projects',
				start: 'top 50%',
				end: 'bottom 100%',
				scrub: 2,
				// markers: true,
			},
		})

		gsap.from('.projects__title-box .title-box__title', {
			opacity: 0,
			scrollTrigger: {
				trigger: '.projects',
				start: 'top-=200 50%',
				end: 'bottom-=850 100%',
				scrub: 2,
				// markers: true,
			},
		})

		gsap.from('.projects__title-box .title-box__text-holder', {
			opacity: 0,
			scrollTrigger: {
				trigger: '.projects',
				start: 'top-=200 50%',
				end: 'bottom-=850 100%',
				scrub: 2,
				// markers: true,
			},
		})

		gsap.to('.projects', {
			scale: 0.7,
			scrollTrigger: {
				trigger: '.logos',
				start: 'top 50%',
				end: 'bottom 100%',
				scrub: 2,
				// markers: true,
			},
		})

		if (window.innerHeight < 800) {
			gsap.from('.projects-slide__right-col', {
				scale: 0.5,
				scrollTrigger: {
					trigger: '.projects',
					start: 'top-=850 50%',
					end: 'bottom-=880 100%',
					scrub: 2,
					// markers: true,
				},
			})

			gsap.from('.projects-slide__left-col', {
				scale: 0.5,
				scrollTrigger: {
					trigger: '.projects',
					start: 'top-=850 50%',
					end: 'bottom-=880 100%',
					scrub: 2,
					// markers: true,
				},
			})

			gsap.from('.pagination-projects-slide', {
				x: 2200,
				duration: 1.2,
				stagger: 0.3,
				ease: 'power3.out',
				scrollTrigger: {
					trigger: '.projects-slider',
					start: 'top+=750 50%',
					end: 'bottom+=220 100%',
					toggleActions: 'play none none none',
					// markers: true,
				},
			})
		} else {
			gsap.from('.projects-slide__right-col', {
				scale: 0.5,
				scrollTrigger: {
					trigger: '.projects',
					start: 'top-=250 50%',
					end: 'bottom-=450 100%',
					scrub: 2,
					// markers: true,
				},
			})

			gsap.from('.projects-slide__left-col', {
				scale: 0.5,
				scrollTrigger: {
					trigger: '.projects',
					start: 'top-=250 50%',
					end: 'bottom-=450 100%',
					scrub: 2,
					// markers: true,
				},
			})

			gsap.from('.pagination-projects-slide', {
				x: 2200,
				duration: 1.2,
				stagger: 0.3,
				ease: 'power3.out',
				scrollTrigger: {
					trigger: '.projects-slider',
					start: 'top+=250 50%',
					end: 'bottom+=230 0%',
					toggleActions: 'play none none none',
					// markers: true,
				},
			})
		}

	}
}

Hello, the animation works great, but everything goes wrong when I reduce the zoom of the page or I reduce or increase the width of the browser window and then the animation stops working.
I am attaching the code, as well as a demo site where you can see the animation itself and its behavior when changing the width of the browser window.
When scrolling down, my section should shrink using scale.
But after changing the screen width, something strange happens.
Please help solve this issue.

Project download — https://github.com/denys-khrapov/babolar
Demo link — https://denys-khrapov.github.io/babolar/

January 3, 2025

Yeah, that looks like logic issues in your code. I would STRONGLY recommend that you use gsap.matchMedia()

Also, do NOT do this:

window.addEventListener('resize', () => {
  ScrollTrigger.getAll().forEach(trigger => trigger.kill())
  initGSAPAnimations()
  ScrollTrigger.refresh()
})

That is super wasteful. It's forcing it to do a ton of extra work on every single "resize" event (which may fire hundreds of times). ScrollTrigger automatically does a debounced .refresh() whenever there's a resize anyway.

If you still need help, please make sure you include a minimal demo (like a CodePen or Stackblitz) that clearly illustrates the issue. We can't effectively troubleshoot a live site link, and it isn't super helpful to just show us an excerpt of your code because the problem could be related to CSS or a different JS library or a lot of other things. Please don't include your whole project - just isolate things in a minimal demo with only the necessary code to show the problem.

Good luck. 👍

January 4, 2025

20 hours ago, GreenSock said:

If you still need help, please make sure you include a minimal demo (like a CodePen or Stackblitz) that clearly illustrates the issue.

Yes sorry, you are right. Here is a demo, I added one section on CodePen. —

See the Pen EaYbRKr by denys-khrapov (@denys-khrapov) on CodePen.

I also removed this extra code:

window.addEventListener('resize', () => {
  ScrollTrigger.getAll().forEach(trigger => trigger.kill())
  initGSAPAnimations()
  ScrollTrigger.refresh()
})

I still have the same problem, the animation works fine, but when I try to enlarge or reduce the browser window in the middle of the animation, the animation starts to behave strangely and does not work properly.

January 4, 2025

Ah, that's because you've got this in your CSS:

scroll-behavior: smooth;

That's sorta like adding a CSS transition to something that you're also trying to animate with GSAP - it makes the browser refuse to implement the change that GSAP tries to make right away. Instead, it drags it out over time. So when ScrollTrigger has to set the scroll position temporarily during the refresh() process, the browser sees scroll-behavior: smooth and says "NOPE! I won't do that yet...I'll gradually do it over time" and that messes up all the calculations.

I guess if you REALLY need scroll-behavior: smooth, you could temporarily disable it during the refresh() like:

window.addEventListener("resize", () => {
  document.body.style.scrollBehavior = document.documentElement.style.scrollBehavior = "auto";
});
ScrollTrigger.addEventListener("refresh", () => {
    document.body.style.scrollBehavior = document.documentElement.style.scrollBehavior = "smooth";
});

Does that clear things up?

January 4, 2025

10 minutes ago, GreenSock said:

Does that clear things up?

Yes, you explained everything perfectly! Thank you very much. This solved my question!

Notifications

Messages

Problem when changing browser screen width

Recommended Posts

Denys-khr

GreenSock

Denys-khr

GreenSock

Denys-khr

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members