Vasil

Hello, amazing people! Again, I couldn't create a codepen copy of the problem because it might be related to the rest of the webpage. So I would share the link here if needed, I can share some login details in the project testing environment. The problem is in the second ScrollTrigger, where Homer is located. The strange thing is that in more modern devices or different browsers, there is no glitch, for example in Safari or iOS there is no glitch, but in Brave or an Android device there is. Here is the code: gsap.registerPlugin(ScrollTrigger); ScrollTrigger.matchMedia({ // Desktop "(min-width: 1120px)": function () { const tlDesktop = gsap.timeline(); tlDesktop.fromTo( ".monitor-wrapper", { scale: 4, force3D: false, transformStyle: "flat" }, { scrollTrigger: { trigger: ".desktop", start: "top top", end: "bottom -200%", scrub: true, pin: true, }, scale: 1, } ); }, }); ScrollTrigger.matchMedia({ // Mobile "(max-width: 1119px)": function () { const tlMobile = gsap.timeline(); tlMobile.fromTo( ".mobile-screen", { scale: 3.6, force3D: false, transformStyle: "flat" }, { scrollTrigger: { trigger: ".mobile-container", start: "top top", end: "bottom -200%", scrub: true, pin: true, }, scale: 1, } ); }, }); ScrollTrigger.matchMedia({ // Desktop "(min-width: 1120px)": function () { const tlDesktopHomer = gsap.timeline(); tlDesktopHomer.fromTo( ".homer-brain", { scale: 36, force3D: false, transformStyle: "flat" }, { scrollTrigger: { trigger: ".homer-container", start: "top top", end: "bottom -200%", scrub: true, pin: true, }, scale: 1, } ); }, }); ScrollTrigger.matchMedia({ // Mobile "(max-width: 1119px)": function () { const tlMobileHomer = gsap.timeline(); tlMobileHomer.fromTo( ".homer-brain", { scale: 80, force3D: false, transformStyle: "flat" }, { scrollTrigger: { trigger: ".homer-container", start: "top top", end: "bottom -200%", scrub: true, pin: true, }, scale: 3.5, } ); }, }); ScrollTrigger.batch(".stickman", { toggleClass: "active", once: true, }); Here is the link: https://staging.gurbov.design/ Thank you!

Okay... I am open for other ideas

Thank you, I will consider making those changes.

Hello, amazing people! I am currently recreating my website, however, I have some questions and need suggestions. I don't have a codepen, but I can attach the code (it's not too long) and I can send you a link to my sandbox. - https://gdesign.newww.website/ Can you give me an idea how can I keep on every device and resolutions my hero section + the welcoming title in the exact center of the screen, right now I am accomplishing this with 100vw and 100vh, where I have the SVG designed so the monitor is in the exact center, however on lower monitor height I have this white space between the sections (because of the min-height 100vh), but If I make the image relative and height: auto, the monitor won't be centered with the titles. Here is the whole code for this page, I have a few more triggers: function createDesktopAnimation() { const tlDesktop = gsap.timeline(); tlDesktop.fromTo( ".monitor-wrapper", { scale: 5, force3D: false, transformStyle: "flat" }, { scrollTrigger: { trigger: ".desktop", start: "top top", end: "bottom -400%", scrub: true, pin: true, }, scale: 1, } ); } function createTabletAnimation() { const tlTablet = gsap.timeline(); tlTablet.fromTo( ".monitor-wrapper", { scale: 1 }, { scrollTrigger: { trigger: ".desktop", start: "top top", end: "bottom bottom", scrub: false, pinSpacing: false, pin: false, }, } ); } function createMobileAnimation() { const tlMobile = gsap.timeline(); tlMobile.fromTo( ".mobile-screen", { scale: 3.6, force3D: false }, { scrollTrigger: { trigger: ".mobile-container", start: "top top", end: "bottom -200%", scrub: true, pin: true, }, scale: 1, } ); } function createHomerDesktopAnimation() { const tlHomerDesktop = gsap.timeline(); tlHomerDesktop.fromTo( ".homer-brain", { scale: 36, force3D: false, transformStyle: "flat" }, { scrollTrigger: { trigger: ".homer-container", start: "top top", end: "bottom -500%", scrub: true, pin: true, }, scale: 1, } ); } function createHomerMobileAnimation() { const tlHomerMobile = gsap.timeline(); tlHomerMobile.fromTo( ".homer-brain", { scale: 80, force3D: false, transformStyle: "flat" }, { scrollTrigger: { trigger: ".homer-container", start: "top top", end: "bottom -300%", scrub: true, pin: true, }, scale: 3.5, } ); } ScrollTrigger.matchMedia({ "(min-width: 1120px)": createDesktopAnimation, "(min-width: 993px) and (max-width: 1119px)": createTabletAnimation, "(min-width: 320px) and (max-width: 992px)": createMobileAnimation, }); ScrollTrigger.matchMedia({ "(min-width: 1120px)": createHomerDesktopAnimation, "(max-width: 1119px)": createHomerMobileAnimation, }); ScrollTrigger.batch(".stickman", { toggleClass: "active", once: true, }); 2. My second question, I can notice some glitches, on the rest of the scroll triggers (Homer at the bottom for example :D), let's say I scroll too fast to the bottom from the top or I refresh the page and start from bottom to the top. In those cases, we can see weird glitches as well as some trouble with the scroll in general. How can I fix this or at least what is the cause? Thank you so much, sorry for the weird code share...

Hello good fellas, I am currently working on a small but complex project with a tight deadline. The client wants to reproduce two of the effects from this sample website: Share and explore incredible stories. (thestorio.com) I noticed these guys use GSAP, so I was wondering if anyone could share something similar on how it's done. I would be very grateful. You can assume that I am specifying the pinned elements and transitions on scroll from these sections: Section N1: Section N2: Thank you in advance!

Hey Cassie, that's what I thought too, but I wish that it wasn't the right answer since I have to start over. Thank you so much for your reply, I really appreciate it!

Hello everyone! I am facing an issue with my personal website - https://gurbov.design/. When It's opened on Safari, MacOS the first section is blurred but as soon as I scroll the quality is normal (I am using force3D: false). I don't know how to approach this, If you need the code I can give it, but I am not sure how useful it might be (I am using a website builder, so It won't be visible on CodePen). Thank you in advance!

Love u!