Animating elements and updating a transform: matrix3d offset y position on scroll of a scrolltriggered element

[Strapchay]

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.

See the Pen JjerzKJ by Walexero (@Walexero) on CodePen

[akapowl]

 

Hello there @Strapchay, welcome to the forum.

If you are looking for a smooth-scrolling solution like on that website, you'll want to have a look at ScrollSmoother - it is GreenSock's very own smooth-scrolling implementation, and in fact, on that website you mentioned, they are using it.

 

ScrollSmoother is a plugin that is available for members of Club GreenSock on the tier Shockingly Green and above.

You can try implementing something similar yourself of course, but trust me, not only will ScrollSmoother save you a whole lot of time but also a lot of headache when it comes to fixing/working around issues (and there will be quite some of those when you try to attempt it yourself), so the plugin should 'pay for itself' in no time.

Consider joining the club! Happy tweening!

https://greensock.com/docs/v3/Plugins/ScrollSmoother
 

[Strapchay]

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 

See the Pen qBQPwMG?editors=1111 by Walexero (@Walexero) on CodePen

 

[Strapchay]

3 hours ago, akapowl said:

 

Hello there @Strapchay, welcome to the forum.

If you are looking for a smooth-scrolling solution like on that website, you'll want to have a look at ScrollSmoother - it is GreenSock's very own smooth-scrolling implementation, and in fact, on that website you mentioned, they are using it.

 

ScrollSmoother is a plugin that is available for members of Club GreenSock on the tier Shockingly Green and above.

You can try implementing something similar yourself of course, but trust me, not only will ScrollSmoother save you a whole lot of time but also a lot of headache when it comes to fixing/working around issues (and there will be quite some of those when you try to attempt it yourself), so the plugin should 'pay for itself' in no time.

Consider joining the club! Happy tweening!

https://greensock.com/docs/v3/Plugins/ScrollSmoother
 

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.


 

[akapowl]

 

1 hour ago, Strapchay said:

Hi, i was having to make a working example

 

Yeah, sorry about that, that was the GSAP Helper not understanding the question properly at first  

If you want to simulate scrolling, from a GSAP point of view what you are trying to do, doesn't make much sense, I'm afraid.

1) You are trying to animate position and overflow with a .to() tween - but those properties are not animatable to begin with.

2) You are setting a transform in your timeline, when you actually would want to tween on transforms in a scenario like that.
3) I don't think you should try to tween transforms like you do there; when working with GSAP you'll rather want to use properties like x, y, etc. and let GSAP handle what is neccessary to get the most reliable/performant result under the hood...

 

https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin

... The transform: matrix3d(...) is very likely applied by ScrollSmoother to accomplish exactly that;

which, as I already mentioned above, that website you referred to earlier, uses for their smooth-scrolling.

 

[Edit]
Also you are applying a scrollTrigger to a tween of a timeline, which is not how it works in this case. When using timelines, scrollTriggers are only supposed to go into the timeline object, and not into the individual tweens of a timeline. That is one of the most common ScrollTrigger mistakes, btw.

 

Getting proper smooth-scrolling applied yourself, as I mentioned earlier, will be a humongous task with lots of pitfalls and roadblocks.

Figuring out proper JS logic for it to work is just the tip of the iceberg there - you'll need a proper markup / CSS layout to begin with; and then there's uncountable browser shennanigans you will encounter, etc...

Hundreds, if not thousands of hours have gone into GreenSock's development of ScrollSmoother to ensure the best smooth-scrolling experience possible, ironing out countless issues and some of the usual drawbacks that come with the concept of smooth-scrolling.

 

Which also is why I can not help you dig into achieving it yourself any more than this, I'm afraid;

 

ScrollSmoother will be your safest bet with this.

 

 

 

[Edit]

I just also wanted to mention that you can of course find lots of custom smooth-scrolling solutions throughout this forum, like e.g. in the threads linked below.

 

And there also is this older helper-function utilizing ScrollTrigger for smooth-scrolling - albeit it is not being supported anymore and is 'deprecated' in favour of ScrollSmoother.

See the Pen gOgWELo by GreenSock (@GreenSock) on CodePen

 

 

Honestly though, I wouldn't count on getting too much support on any custom approach like that, with ScrollSmoother being the way to go now - it would be sort of counter productive for the team that put so much detail work into a product, if they were to help people find the ideal solution for free, when at the same time they sell a product that took so much effort.
 

 

 

 

 

 

[Strapchay]

1 hour ago, akapowl said:

 

 

Yeah, sorry about that, that was the GSAP Helper not understanding the question properly at first  

If you want to simulate scrolling, from a GSAP point of view what you are trying to do, doesn't make much sense, I'm afraid.

1) You are trying to animate position and overflow with a .to() tween - but those properties are not animatable to begin with.

2) You are setting a transform in your timeline, when you actually would want to tween on transforms in a scenario like that.
3) I don't think you should try to tween transforms like you do there; when working with GSAP you'll rather want to use properties like x, y, etc. and let GSAP handle what is neccessary to get the most reliable/performant result under the hood...

 

https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin

... The transform: matrix3d(...) is very likely applied by ScrollSmoother to accomplish exactly that;

which, as I already mentioned above, that website you referred to earlier, uses for their smooth-scrolling.

 

[Edit]
Also you are applying a scrollTrigger to a tween of a timeline, which is not how it works in this case. When using timelines, scrollTriggers are only supposed to go into the timeline object, and not into the individual tweens of a timeline. That is one of the most common ScrollTrigger mistakes, btw.

 

Getting proper smooth-scrolling applied yourself, as I mentioned earlier, will be a humongous task with lots of pitfalls and roadblocks.

Figuring out proper JS logic for it to work is just the tip of the iceberg there - you'll need a proper markup / CSS layout to begin with; and then there's uncountable browser shennanigans you will encounter, etc...

Hundreds, if not thousands of hours have gone into GreenSock's development of ScrollSmoother to ensure the best smooth-scrolling experience possible, ironing out countless issues and some of the usual drawbacks that come with the concept of smooth-scrolling.

 

Which also is why I can not help you dig into achieving it yourself any more than this, I'm afraid;

 

ScrollSmoother will be your safest bet with this.

 

 

 

[Edit]

I just also wanted to mention that you can of course find lots of custom smooth-scrolling solutions throughout this forum, like e.g. in the threads linked below.

 

And there also is this older helper-function utilizing ScrollTrigger for smooth-scrolling - albeit it is not being supported anymore and is 'deprecated' in favour of ScrollSmoother.
 

 

 

 

Honestly though, I wouldn't count on getting too much support on any custom approach like that, with ScrollSmoother being the way to go now - it would be sort of counter productive for the team that put so much detail work into a product, if they were to help people find the ideal solution for free, when at the same time they sell a product that took so much effort.
 

 

 

 

 

 

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.