i lately work with threejs and webgl alot.
after a point i have to animate some variables from 0 to 100 or 0 to 180 or x to y.
just like custom css we need global vars.
if we had a custom global var for to hook our js codes it would be awesome. from -> to.
it is a bit advance feature but i think it can be crazy powerful.
😊
for now i will keep using the custom css to read my variable numbers from the dom. a bit of a pain but it works 😎
this is how I do my hack for now because we don't have global js var.
jQuery( document ).on( "scroll", function( event ) {
// i keep reading the custom css variable scroll trigger value from dom
var x1 = jQuery('.class-name-to-look').css('--css-property-to-read');
// this is the custom css from motion editor i am keep reading this value
var x1_only_INT = parseInt(x1, 10);
// i use that scrolltrigger value from custom css and asign it to the js
// and now FINALY i can assig this to threejs camera or whatever i want
camera.position.set(x1, 10, 20);
// threejs camera position changes with scroll easy.
});