Canvas translating depending on MouseMove?

[Aureliano Capri]

Hi,

the header on this website is my main reference:

https://www.apple.com/go/iwd2020/

 

Is it designed with GSAP?

If yes, are there some examples similar to this?
If not, how do you call this kind of effect? (I tried to explain it in the title)

 

I honestly miss the right definition for looking for the right tutorial/documentation.

 

Sorry if it could seem off topic.

 

Bye

Aureliano

[Cassie]

Hey Aureliano

 

This thread may help - it's using old tweenLite syntax but the general idea is there
 

You could also use gsap.ticker() for better performance

See the Pen WNNNBpo by GreenSock (@GreenSock) on CodePen

 

Good luck!

 

[Aureliano Capri]

9 minutes ago, Cassie said:

Hey Aureliana

 

This thread may help - it's using old tweenLite syntax but the general idea is there
 

You could also use gsap.ticker() for better performance
 

 

 

Good luck!

 

Thank you so much Cassie. While I was waiting answers on this thread, I also found some good references in the syntax:

 

- mouseMove

- event.PageX

- event.PageY

- gsap.to($cursor, {

 

Now I'll add to my list also gsap.ticker()!

 

I hope to give you good updates.

[akapowl]

Here's another thread that might come in handy @Aureliano Capri.

 

Combined with what Cassie suggested you should get pretty close to that Apple Website.