Jump to content
Search Community

Fullwidth + Translation + Loop + Hover

Aureliano Capri test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Split your task into sub-tasks. Try to answer the questions: Does the grid have a fixed pattern? (If fixed, then you can try to build a grid using css, otherwise - js). What is the logic of building the grid (where is the first element, in which direction it is built, which element should become small or medium)? Does the grid should have reps, random ...

 

After you create grid - animation will take much less time.

Building the grid in your example is just the hardest task, animation is simple (if you don't add lazy loads as you animate, loop ...)

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...