MakeUp

Hi, try setting will-change: transform on the CSS of your moving elements

Please help, I have been unable to find a solution for my site for a week now. FullPage site, first screen 100vh. I want the timeline-hero to be played when scrolling down, and after the end of the animation, there will already be a transition to the next section. Everything works with my code, but if you scroll with the mouse wheel, it scrolls down a lot, but you need the block to stand still until the end of the timeline-hero. Thank you. var hero = gsap.timeline({paused: 1}); hero.to('.text-line-3', { scale: 0, rotation: -90, ease:'none', }, "<"); hero.to('.text-line-2', { scale: 0, rotation: 90, ease:'none', }, "<"); hero.to('.text-line-1', { scale: 0, rotation: -90, ease:'none', },"<"); hero.to(' .rocket', { x: 0, y: "-160%", ease:'none', }, "<"); var sections = document.querySelectorAll(".section"); var scrolling = { enabled: true, events: "scroll,wheel,touchmove,pointermove".split(","), prevent: e => e.preventDefault(), disable() { if (scrolling.enabled) { scrolling.enabled = false; window.addEventListener("scroll", gsap.ticker.tick, {passive: true}); scrolling.events.forEach((e, i) => (i ? document : window).addEventListener(e, scrolling.prevent, {passive: false})); } }, enable() { if (!scrolling.enabled) { scrolling.enabled = true; window.removeEventListener("scroll", gsap.ticker.tick); scrolling.events.forEach((e, i) => (i ? document : window).removeEventListener(e, scrolling.prevent)); } } }; function goToSection(section, i) { if (scrolling.enabled) { // skip if a scroll tween is in progress scrolling.disable(); if(i == 1){ hero.play(); hero.eventCallback("onComplete", function() { gsap.to(window, { scrollTo: {y: section, autoKill: true}, onComplete: scrolling.enable, duration: 2 }); }); }else{ gsap.to(window, { scrollTo: {y: section, autoKill: false}, onComplete: scrolling.enable, duration: 1 }); } } }; function backToSection(section, i) { if (scrolling.enabled) { // skip if a scroll tween is in progress scrolling.disable(); if(i == 0){ gsap.to(window, { scrollTo: {y: section, autoKill: false}, onComplete: scrolling.enable, duration: 1 }); hero.reverse(); }else{ gsap.to(window, { scrollTo: {y: section, autoKill: false}, onComplete: scrolling.enable, duration: 1 }); } } }; sections.forEach((section, i) => { ScrollTrigger.create({ trigger: section, start: "top bottom-=1", end: "bottom top+=1", onEnter: () => goToSection(section, i), onEnterBack: () => backToSection(section, i) }); });

Thanks for the advice, but unfortunately it did not help, I noticed that the bug is due to the fact that I use opacity. And on the first screen of which, with the pin: true parameter, I have an animation, and only then the next section appears, but after the animation is over in safari, the section jumps by several px

The problem only appears in safari. I've been struggling with this for 2 weeks now.

Hi all. There was a problem with the scrolltrigger. On Mac OS and Iphone, the site freezes a lot, animation on the first screen with lags when scrolling. Maybe someone faced a similar problem? Here is the link to the site rocket.makeupman.ru