Mattrudd Posted January 7, 2023 Share Posted January 7, 2023 Hi folks, Happy New year to you (only 4 days over the limit 😅)  I'd like to animate a Blotter.js effect using ScrollTrigger instead of the way it's currently set up in my pen to animate onmousemove.  The gap in my knowledge is how to make Scrolltrigger multiply the two values (material.uniforms.uOffset.value and material.uniforms.uRotation.value) I understand how to call a standard function using Scrolltrigger, but here I'm wanting to affect a specific value as the page scrolls (rather than as the mouse moves).  There's a Codrops article here that details hooking up Blotter.js to scroll but figured this wouldn't work in conjunction with ScrollTrigger/Scrollsmoother. Have a feeling it may involve something like an onUpdate function 🤔 but I'm likely way off there.  Fully fully appreciate you couldn't possible support another library but hoping to sneak this within the GS remit - as a wider question about affecting values in the way I describe with ScrollTrigger.  🙌  See the Pen qByRarR?editors=1111 by matt-rudd (@matt-rudd) on CodePen Link to comment Share on other sites More sharing options...
Solution akapowl Posted January 8, 2023 Solution Share Posted January 8, 2023 Hey there.  As long as you've got objects with numeric values (like you do, using blotter.js) you should be able to tween on them directly via GSAP.  This bit here is from the getting started article:  What else can I animate?  [...]   Any numeric value, color, or complex string containing numbers  GSAP doesn't need DOM elements in order to animate properties. You can target literally any property of any object, even arbitrary ones you create like this:   let obj = { myNum: 10, myColor: "red" }; gsap.to(obj, { myNum: 200, myColor: "blue", onUpdate: () => console.log(obj.myNum, obj.myColor) });    Just hook it up to a ScrollTrigger and you should be good to go (I know you've used ST before, so I'm going o leave that up to you  )  See the Pen oNMBWRO by akapowl (@akapowl) on CodePen  2 1 Link to comment Share on other sites More sharing options...
Mattrudd Posted January 8, 2023 Author Share Posted January 8, 2023 Hugely grateful as ever @akapowl! Thanks loads. Feel like I've come pretty far with GSAP, thanks to this forum, but it's still sometimes the really simple things that trip me up!   Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now