Tomáš938 Posted July 21, 2021 Share Posted July 21, 2021 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/ Link to comment Share on other sites More sharing options...
Tomáš938 Posted July 21, 2021 Author Share Posted July 21, 2021 link to page https://tomaspage2.netlify.app/ Link to comment Share on other sites More sharing options...
Cassie Posted July 21, 2021 Share Posted July 21, 2021 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? 1 Link to comment Share on other sites More sharing options...
Tomáš938 Posted July 21, 2021 Author Share Posted July 21, 2021 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 Link to comment Share on other sites More sharing options...
Cassie Posted July 21, 2021 Share Posted July 21, 2021 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, }); 2 Link to comment Share on other sites More sharing options...
Tomáš938 Posted July 21, 2021 Author Share Posted July 21, 2021 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 Link to comment Share on other sites More sharing options...
Cassie Posted July 21, 2021 Share Posted July 21, 2021 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. Link to comment Share on other sites More sharing options...
GreenSock Posted July 21, 2021 Share Posted July 21, 2021 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now