quickSetter pin or trigger?

[EVA CORPORATION]

Good afternoon.

Please tell me, is there a function that will allow you to change styles or add a class to the ball block that follows the cursor.

For example, if the cursor hit a block with the btn class, dissolve the cursor by the size of the button block, or when hovering over blocks with the info-img and black-block class, the color changed (or added its own class to the ball).

See the Pen QWzmRgr by eglit_m (@eglit_m) on CodePen

[mvaneijgen]

For the animation it self you can of course do what ever you want (for the filling of other elements I would look in to the Flip plugin). But you can just add event listeners to the elements you want things to happen and do your animation when that happens. Hope it helps and happy tweening! 

 

See the Pen eYbMwMz?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen

[EVA CORPORATION]

1 hour ago, mvaneijgen said:

For the animation it self you can of course do what ever you want (for the filling of other elements I would look in to the Flip plugin). But you can just add event listeners to the elements you want things to happen and do your animation when that happens. Hope it helps and happy tweening!

I didn't think it was possible to use add event listeners in this way!

Thank you very much ^___^

[EVA CORPORATION]

1 hour ago, mvaneijgen said:

For the animation it self you can of course do what ever you want (for the filling of other elements I would look in to the Flip plugin). But you can just add event listeners to the elements you want things to happen and do your animation when that happens. Hope it helps and happy tweening!

And how to turn to the mix-blend-mode style? For example, there is a backgroundColor for the background.
Or is it easier to add a class when the cursor hits the black-block block?

[EVA CORPORATION]

	document.querySelectorAll(".black-block").forEach((item) => {
	  item.addEventListener("mouseenter", function () {
	    gsap.to(".ball", {
		toggleClass: '.class-ball',
		backgroundColor: '#ffffff'
	    });
	  });
	  item.addEventListener("mouseleave", function () {
	    gsap.to(".ball", {
		backgroundColor: '#DE002B'
	    });
	  });
	});

For some reason, toggleClass is not added

[mvaneijgen]

toggleClass is not a property of a tween (it is however a property of ScrollTrigger), but you don't really need GSAP to add a class to something, you could just do this with JS. 

 

Add mixBlendMode could also be set in a tween, keep in mind that it is not tween-able it will just switch between states.  

 

See the Pen NWeMWWE?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen