[Canvas translating depending on MouseMove?]

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.

[Canvas translating depending on MouseMove?]

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

[Fullwidth + Translation + Loop + Hover]

1 hour ago, _Greg _ said:

Sure!

If you check GSAP home page you will see gallery 

 

If you check GSAP page on Codepen you will find alot of usefull examples and answers https://codepen.io/GreenSock

For a more specific answer you need to ask a more specific question. 

Please create a minimal demo 

Thank you so much _Greg_,

unfortunatly I hadn't enough coding basis for creating a sketch on Codepen.

I will try to follow your suggestions.

 

The codepen example that you sent me was already inspiring.

[Fullwidth + Translation + Loop + Hover]

24 minutes ago, _Greg _ said:

Hi!

Sure! You can create animation like this, but not sure about slider revolution or smart slider they are very heavy, I think they are not suitable for such a task, better write your own slider, because its simple task (generate masonry grid) or you can generate grid with masonry  and animate it after (not sure)

Hi _Greg_ thank you for your precious suggestions. Do you have any advice about HOW doing it with GSAP?

[Fullwidth + Translation + Loop + Hover]

Hi,

my name is Aureliano and it's my first time in GSAP. I am designer, but I collaborate with a coder. I am here because I would like to understand mechanics behind an animation that I would like to develop in GSAP with my partner (in crime).

 

Attached you found a test that I did with Slider Revolution (I tried Smart Slider too) and effect sounds "good".

I want to realize a pattern made by three types of squares (120x120, 256x256, 392x392 pixel) - gutter in rows and columns is always 16.

Pattern should translate to the left.

Every square will have a content inside (Image or GIF). Some of them will be hoverable and the translation should stop in case of hover.

Hoverable squares links to an another page. When MouseLeave, translation start again.

The entire animation is in loop.

 

GSAPpers, is it possibile to realize something like this in GSAP?

 

Thank you in advance for the interest, if you like my idea.

 

Bye

Aureliano