mouse hover effect with different images.

[Bolargent]

Hello guys,

 

I recently discovered how innovative GSAP can be when I browsed https://amandabraga.com/. I believe the mouse over/hover random image effect was done with GSAP.  Please what is the name of that effect? I know I haven't seen much about GSAP but I have already fallen in love with innovations of Green Sock and I want to put in the time to learn more and become part of this noble community. I mean every word I say. 

 

I suspect what I am looking has something to do with this kind of effect: "gsap.quickSetter() mouse follower" 

But what I want is for the mouse pointer to be followed with random images. Guys please be kind to me, I will pay it forward one way or the other.

Any help or pointers on what to study or work with would be greatly appreciated.

 

Best regards,

Bolargent.

 

NB: I have seen this response below. 😄   No need to repeat it please... 🙏

 

"We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. "

See the Pen by collection (@collection) on CodePen

[Rodrigo]

Hi @Bolargent and welcome to the GreenSock forums!

 

This thread could provide a good starting point:

 

Hopefully this helps.

Happy Tweening!

[Cassie]

Heya!

 

Carl's a great person to follow for breakdowns - he actually covered a mouse follower like this a while ago

https://x.com/snorklTV/status/1686111184603217920?s=20

See the Pen oNQJwzZ?editors=0010 by snorkltv (@snorkltv) on CodePen

I would share the end result here - but it may be for Carl's students - so I'll leave it to him to walk through it or link you to it if he would like.

 - I've recently made something along these lines too (We all got a bit inspired when we saw the codrops demo and wanted to give it a bash) - Mine uses some of GSAP's utils and quickTo, I'm planning on writing a post about it so I'll tag this post and pop back when it's live. ☺️

[Bolargent]

@Rodrigo thanks for the thread. I will go through it. @Cassie stay winning and please do well to write that post. Let me know when you do, I will love to read through.

 

Thank you very much guys!

 

I love the energy I am getting here. I will surely put in the efforts to learn. 

 

More assistance or guidance will be appreciated. 

[Bolargent]

I have seen the effects on the thread... But it is not as fluid or effective as the one on https://amandabraga.com/ The images don't move randomly and smoothly. @Cassie please confirm or help me compare the two. I want to learn right.

 

[Rodrigo]

Hi,

 

I didn't said that the examples in that thread are exactly like the ones in the site you linked, just a starting point. There is a bit more custom logic involved into creating that and is not an extremely simple endeavor.

 

In terms of learning, I would start by creating an animation that does what you want, without the mouse follow feature, then create the mouse follow feature that adds calls a method in order to add the image and then animate it. Sure sounds simple but is not that simple. Unfortunately cool effects like that never are and the learning curve sometimes is steeper than we'd like.

 

Good luck!

Happy Tweening!