Scrollreveal problem

[Tomáš938]

Hi, i have this page it's one of the front end mentor challenge and i use GSAP for scroll animation for grid gallery section but sometimes when u load the page it's not working  opacity is sometimes set  to 1 except zero so my animation don't work. Do you know how to fix this? Thanks   link to page https://tomaspage2.netlify.app/

[Tomáš938]

link to page https://tomaspage2.netlify.app/

[Cassie]

 

Hey there Tomáš!

 

Welcome to the forums!

I'm afraid it's impossible to debug this without looking at the code you've written - could you possibly put together a minimal demo over on codepen to illustrate the issue?

[Tomáš938]

54 minutes ago, Tomáš938 said:

 

Hi, i removed all unnecessary code so know u can press f12 and check it in browser or github repo https://tomaspage2.netlify.app/ im not really now how to work with codepen so here is my github repo with code  https://github.com/tomas938/loopstudios-landing-page-main

[Cassie]

Thanks for doing that Tomáš, 

Codepen is a lot easier for us to help though - I can't change things in your github repo so it's pretty difficult to work out what the issue is.

Everything you need to set up a demo is in this minimal demo link. It's nice and simple.

From a cursory look I don't know what is causing your issue, but you're repeating a lot of code unnecessarily - both in your SCSS and your JS. You could use scrollTrigger.batch() to handle this, and you don't have to apply the same styles separately to every item in the grid.

Pop it into a codepen and we'll help guide you towards a better solution.
 

gsap.to(".grid__gallery__item-1", {
	scrollTrigger: {
		trigger: ".grid__gallery__item-1",
		start: "0% 80%",
		end: () => "+=" + document.querySelector(".skill").offsetWidth,
		end: "50% 80%",
		scrub: 3,

		toggleActions: "restart pause reverse pause",
	},
	opacity: 1,
	x: 0,
	rotation: 360,
	duration: 1,
});
gsap.to(".grid__gallery__item-4", {
	scrollTrigger: {
		trigger: ".grid__gallery__item-4",
		start: "0% 80%",

		end: "50% 80%",
		scrub: 3,

		toggleActions: "restart pause reverse pause",
	},
	opacity: 1,
	x: 0,
	rotation: 360,
	duration: 1,
});
gsap.to(".grid__gallery__item-2", {
	scrollTrigger: {
		trigger: ".grid__gallery__item-2",
		start: "-33% 80%",

		end: "50% 80%",
		scrub: 3,
		toggleActions: "restart pause reverse pause",
	},
	opacity: 1,
	y: 0,
	duration: 1,
});
gsap.to(".grid__gallery__item-3", {
	scrollTrigger: {
		trigger: ".grid__gallery__item-3",
		start: "-33% 80%",

		end: "50% 80%",
		scrub: 3,
		toggleActions: "restart pause reverse pause",
	},
	opacity: 1,
	y: 0,

	duration: 1,
});
gsap.to(".grid__gallery__item-5", {
	scrollTrigger: {
		trigger: ".grid__gallery__item-5",
		start: "-33% 80%",
		end: "50% 80%",
		scrub: 3,
		toggleActions: "restart pause reverse pause",
	},
	opacity: 1,
	y: 0,
	// rotation: 360,
	duration: 1,
});
gsap.to(".grid__gallery__item-6", {
	scrollTrigger: {
		trigger: ".grid__gallery__item-6",
		start: "-33% 80%",
		end: "50% 80%",
		scrub: 3,
		toggleActions: "restart pause reverse pause",
	},
	opacity: 1,
	y: 0,
	duration: 1,
});
gsap.to(".grid__gallery__item-7", {
	scrollTrigger: {
		trigger: ".grid__gallery__item-7",
		start: "-33% 80%",

		end: "50% 80%",
		scrub: 3,
		toggleActions: "restart pause reverse pause",
	},
	opacity: 1,
	y: 0,
	duration: 1,
});
gsap.to(".grid__gallery__item-8", {
	scrollTrigger: {
		trigger: ".grid__gallery__item-8",
		start: "-33% 80%",

		end: "50% 80%",
		scrub: 3,
		toggleActions: "restart pause reverse pause",
	},
	opacity: 1,
	y: 0,
	duration: 1,
});

 

[Tomáš938]

Well, i realize two things first i don't like codepen  and second when i put my gsap code into setTimetout with delay 100 ms my code working as i want. Thanks for help im new to programming and GSAP so it's hard for me and of course i will refactor code

[Cassie]

This sounds like sticking duct tape over an issue rather than fixing it - but as long as you're happy with that as a solution.
 

4 minutes ago, Tomáš938 said:

setTimetout with delay 100 ms my code working as i want.

 

[GreenSock]

4 hours ago, Tomáš938 said:

when i put my gsap code into setTimetout with delay 100 ms my code working as i want.

That smells like a lazy-loading issue or something that is basically causing a reflow to the layout in the browser AFTER ScrollTrigger has refreshed (which it automatically does when the page loads). I'm not sure what environment you're in but perhaps there's a lifecycle event you can tap into so that you call ScrollTrigger.refresh() AFTER the page is DONE doing its layout. I'm only guessing here.