Jump to content
Search Community

dot to square in a circular motion

Sayrana test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi there, I'm quite new to GSAP and every things related to animation.

I try to reproduce an animation I really loved on another website.
Here is the website :
http://www.7h34.fr/
I'm talking about the animation which separate 2 portfolio pages.
This kind of clock movement to open a new tab.
Actually the best I've done is that kind of animation:

See the Pen OjdPvB by Sayrana (@Sayrana) on CodePen

After lot of reads / try, I have no clue how to deal with the circular animation ...
Is it possible to achieve this animation with gsap ?
Thanks a lot for your help !

Link to comment
Share on other sites

This was actually a pretty clever transition and it took me a little while to figure out what was happening.

The solution came only after I recorded a video to study the transition in slow motion. (you can change the speed of this youtube video)

I initially thought they were doing very clever masking but it turns out they are only rotating very large, solid-colored rectangles.

 

The animation is always:

- a rectangle animates to cover up an image on one side

- then another rectangle animates out to reveal an image

 

and that process just repeats over and over again.

 

The tricky part is that for each transition you have re-sort the stacking order of the rectangles that are animating and the images that are being revealed and covered.

 

I did a VERY ROUGH mockup just because I saw it as a bit of a challenge. The code is horrendous and in real life you would want to make it more dynamic and flexible. I provide this to show just that the effect can be achieved just by rotating some divs around. I don't expect you or anyone to understand all the code as ... again ... it was done in haste as an experiment as a proof of concept. It would take me quite some time to do it right. RIght now it is quite slow to help you see what is happening.

 

See the Pen BdMNvj?editors=1010 by GreenSock (@GreenSock) on CodePen

 

 

 

 

 

 

  • Like 5
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...