Jump to content
Search Community

Combining Blotter.js and Scrolltrigger

Mattrudd test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

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

  • Solution

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

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...