ANIMATION SCROLL
Wed Oct 18 2023 06:42:04 GMT+0000 (Coordinated Universal Time)
Saved by @chicovirabrikin #nodejs
<div> <div id="content"> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollToPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/MotionPathPlugin.min.js"></script> <script type="module"> gsap.registerPlugin(ScrollTrigger, MotionPathPlugin); smoothScroll("#content"); function smoothScroll(content, viewport, smoothness) { content = gsap.utils.toArray(content)[0]; gsap.set(viewport || content.parentNode, { overflow: "hidden", position: "fixed", height: "100%", width: "100%", top: 0, left: 0, right: 0, bottom: 0 }); gsap.set(content, { overflow: "visible", width: "100%" }); let getProp = gsap.getProperty(content), setProp = gsap.quickSetter(content, "y", "px"), removeScroll = () => (content.style.overflow = "visible"), needsRefreshFix = parseFloat( ScrollTrigger.version .split(".") .map((n) => ("00" + n).substr(n.length - 1, 3)) .join("") ) < 3006002, height; function onResize() { height = content.clientHeight; content.style.overflow = "visible"; document.body.style.height = height + "px"; } onResize(); ScrollTrigger.addEventListener("refreshInit", onResize); ScrollTrigger.addEventListener("refresh", () => { removeScroll(); requestAnimationFrame(removeScroll); }); ScrollTrigger.defaults({ scroller: content }); ScrollTrigger.prototype.update = (p) => p; // works around an issue in ScrollTrigger 3.6.1 and earlier (fixed in 3.6.2, so this line could be deleted if you're using 3.6.2 or later) ScrollTrigger.scrollerProxy(content, { scrollTop(value) { return arguments.length ? setProp(-value) : -getProp("y"); }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }; } }); gsap.fromTo( content, { y: 0 }, { y: () => document.documentElement.clientHeight - height, ease: "none", onUpdate: ScrollTrigger.update, scrollTrigger: { scroller: window, invalidateOnRefresh: true, start: 0, end: () => height - document.documentElement.clientHeight, scrub: smoothness || 3, onRefresh: (self) => { // when the screen resizes, we just want the animation to immediately go to the appropriate spot rather than animating there, so basically kill the scrub. gsap.killTweensOf(self.animation); self.animation.progress(self.progress); if (needsRefreshFix) { let all = ScrollTrigger.getAll(); all.slice(all.indexOf(self) + 1).forEach((t) => t.refresh()); } } } } ); } document.addEventListener("DOMContentLoaded", function () { smoothScroll(); }); </script>
Comments