Sukru

Thank you very much akapowl of course i will do my future fictions as you say

Hello again akapowl, http://clients.super-agency.com/test/waternet/ Actually, the header should be "position:absolute", can it be "position:fixed" after it? I was trying to do it this way as it would be more suitable for the project

Hi, here is how I can make the header appear only when the scroll moves up. I think smooth scroll is preventing this because of its own page calculation. I can see it when I go to the top of the page. I want to see the header when I scroll up. Like the example here; https://aydindoganvakfi.org.tr/

Yes i wanted this, thanks a lot

Cassie Yea, i edit now https://files.fm/f/e3wmen5gf i drew on the photo what i want to do

Hello, I want to do more than one pin operation, but it does not give a proper display in the second iteration. I want to see the visual content again after the pin content and then pin the content again

Hello again akapowl, it doesnt work my friend, unfortunately, i do all you say, but you will see the video the page is broken in a moment.

Hello, actually what i want to do is why my codes don't run anchor. I am sharing the link with you. I want to go to the form in the most part here, but as i said the code does not work. My codes, gsap.registerPlugin(ScrollTrigger); let viewport = document.querySelector("#viewport"); ScrollTrigger.matchMedia({ // large "(min-width: 600px)": function () { viewport.classList.add("desktop"); let smoother = smoothScroll("#content"); }, // small "(max-width: 599px)": function () { gsap.set(viewport, { clearProps: "all" }); viewport.classList.remove("desktop"); }, }); //Your Code document.querySelectorAll('a').forEach(function (link) { link.addEventListener('click', function (event) { event.preventDefault(); const scrollToHere = link.getAttribute('href') gsap.to(window, { duration: 2, scrollTo: scrollToHere }); }) }); //End // this is the helper function that sets it all up. Pass in the content <div> and then the wrapping viewport <div> (can be the elements or selector text). It also sets the default "scroller" to the content so you don't have to do that on all your ScrollTriggers. function smoothScroll(content, viewport, smoothness) { content = gsap.utils.toArray(content)[0]; smoothness = smoothness || 1; 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"), setScroll = ScrollTrigger.getScrollFunc(window), removeScroll = () => content.style.overflow = "visible", killScrub = trigger => { let scrub = trigger.getTween ? trigger.getTween() : gsap.getTweensOf(trigger.animation)[0]; // getTween() was added in 3.6.2 scrub && scrub.kill(); trigger.animation.progress(trigger.progress); }, height, isProxyScrolling; function refreshHeight() { height = content.clientHeight; content.style.overflow = "visible" document.body.style.height = height + "px"; return height - document.documentElement.clientHeight; } 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) { if (arguments.length) { isProxyScrolling = true; // otherwise, if snapping was applied (or anything that attempted to SET the scroll proxy's scroll position), we'd set the scroll here which would then (on the next tick) update the content tween/ScrollTrigger which would try to smoothly animate to that new value, thus the scrub tween would impede the progress. So we use this flag to respond accordingly in the ScrollTrigger's onUpdate and effectively force the scrub to its end immediately. setProp(-value); setScroll(value); return; } return -getProp("y"); }, scrollHeight: () => document.body.scrollHeight, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }; } }); return ScrollTrigger.create({ animation: gsap.fromTo(content, { y: 0 }, { y: () => document.documentElement.clientHeight - height, ease: "none", onUpdate: ScrollTrigger.update }), scroller: window, invalidateOnRefresh: true, start: 0, end: refreshHeight, refreshPriority: -999, scrub: smoothness, onUpdate: self => { if (isProxyScrolling) { killScrub(self); isProxyScrolling = false; } }, onRefresh: killScrub // 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. }); } I think im more descriptive now :), i want to go from here

Hello akapowl thank you very much My code; https://codepen.io/sukruemanet/pen/MWONzKd I added the code you added as follows, but I think it didn't work in my project, I added it to the echo //Your Code document.querySelectorAll('a').forEach(function (link) { link.addEventListener('click', function (event) { event.preventDefault(); const scrollToHere = link.getAttribute('href') gsap.to(window, { duration: 2, scrollTo: scrollToHere }); }) }); //End

Hello, I'm using gsap smooth scroll, I want to make an anchor in the page, but many things are broken on the page, can you help?

Hello, i want to move the animation in the codepen link with the scrolltrigger on scroll, can you help?

Hello, the structure i want to make is actually auto height at the top and layers from the bottom, and then the last part is independent of the layer. For this I am sharing the image

Thank you very much

Hello, what can I do to play the animation in the codepen link in reverse?

Hello Cassie thank you very much, i wonder if it is possible to implement it in codepen? i want to zoom in and out without opacity