Strapchay

Hi, thanks for the help. This should be a great help and i appreciate it

Hi, have reduced the html to 100 lines of code. For the css i have it segmented into 3 parts, The general styling, The Content styling and then the smooth scroller styling. You really do not have to worry about the general styling as its mainly for the layout of the page. I hope you get to have a look again https://codepen.io/Walexero/pen/ZEmvWrV

I am currently am trying to implement a smooth-scrolling functionality where when the section-hero is scrolled. The Hero-img(the headed figure in the section-hero) is pinned and the contents in the section-hero glide in the opposite direction. I'm basically implementing the functionalities on Yunicorn.vc . I currently have the Hero-img pinned and then expecting the contents to glide in the other direction since i set a positive getProp("y") value. The direction in which it glides works as expected but the hero-img doesn't get pinned and it instead scrolls with the contents i need to glide with the section. I hope you can take a look at my code and help out

Hi, thanks for this and also sharing the thread, i would try the working code with the scrollTrigger + smoothScroller example you shared, it should be pretty much helpful to at least get a seemingly working functionality implemented.

That might be an option i would consider probably in the future when i can pay for it but right now i think i would have to implement it myself. I thought scrollSmoother is built on scrollTrigger based on the doc i read earlier. And that i can implement the same with scrollTrigger. If implementing this with scrollTrigger is going to be a pain. I guess i would have to forgo it then, but since you have a better experience with this, what would you advice i do. Because currently. I tried updating the translateY of the direct child element of the .bkg-layer by setting the value from the scroll.progress, doing something like this but doesn't seem to work or update the value: const gsap = window.gsap; const scrollTrigger = window.scrollTrigger; function updateTranslateOnScroll(value) { // var scrollUpdate = gsap.timeline(); gsap.to(".bkg-content-holder", { // transform: "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)", translate: `translateY({value})`, }); console.log("triggered this"); } // window property holder const win = { h: window.innerHeight, w: window.innerWidth, }; gsap.registerPlugin(scrollTrigger); // timeline var anime = gsap.timeline({ // repeat: -1, }); anime.to(".bkg-layer", { position: "fixed", overflow: "hidden", }); anime.set(".bkg-content-holder", { transform: "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)", // transform: "matrix(0, 0, 1, 0, 0, 1)", width: "100%", overflow: "visible", }); anime.to(".content-top-content", { scrollTrigger: { trigger: ".content-top-content", end: "bottom top", scrub: true, pin: ".hero-bg-img-main", toggleActions: "play pause reverse pause", markers: true, onUpdate: (self) => { console.log("progress", self.progress), updateTranslateOnScroll(self.progress); }, }, }); I hope i can get a response back.

Hi, i was having to make a working example, however, what have noticed is, with trying to get it implemented, i'm currently using the gsap.timeline to set values on the DOM, however, when i set a transform: matrix3d on an element, it translates it transform: translate. Is there a reason for that. Also this is the new link to the codepen which has gsap https://codepen.io/Walexero/pen/qBQPwMG?editors=1111

I currently am trying to replicate/implement the animation scroll functionality on "yunicorn.vc". It seems the transform matrix3d's offset y position is updated on the scroll by gsap. How can i have this implemented by gsap. To always update the offset on scroll while the scrolltrigger hasn't ended. Also the page is scrolled using the matrix3d offset y position.