Make duplicate element follow original

[Daniel Hult]

Hey guys,

Hope someone here can help me with a small issue Im having.

I want to create an effect where you copy an html element in JS and make that "move around" the original element on mousemove over the original element. Also want to clamp the number it can go in each direction by e.g 20px or something.. I've tried to use gsap's utils clamp function, but I don't couldn't get it working properly.

In the codepen at the moment I have the effect working in just one direction (just positive values) without any clamping logic.

Anybody that can help me out?  

See the Pen xxZermJ by daniel-hult (@daniel-hult) on CodePen

[ZachSaucier]

Hey Daniel. I'm not quite sure what the exact end goal is, but you can use clamp like so inside of a tween's vars:

modifiers: {
  x: gsap.utils.clamp(-this.max, this.max),
  y: gsap.utils.clamp(-this.max, this.max),
}

Side notes:

• It might be cleaner to use classes then a bunch of inline JS styles?
• It might make sense to merge your duplicateContent and hoverEffect functions if this is all you're doing. But that's more so preference.

[Daniel Hult]

Hey,

It's the effect on this site here (just move your mouse around):
https://danielebuffa.me/work

Basically just want the duplicate element to move around the original text, but be clamped to max 20px in each direction.
Does that make sense?

[Daniel Hult]

So e.g if you move the mouse above the text, the background text will move up, left it will go left and so on..  

[ZachSaucier]

Clamp probably isn't the way you want to go here. You just want to use a scaler/multiplier and apply that to the distance to the center of your element. 

 

There are lots of threads with related effects: