Jump to content
Search Community

Try to do block reveal with "diagonal"

Artsx 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



I found this site and the animation he uses to show his work I find it beautiful. While inspecting his code I saw that he was using TweenMax but I am unable to find the animation in question and how it is made in the JS.



I tried to do it myself but without success, someone would be able to help me?


Best Regards,


See the Pen MQMYYM by artsx (@artsx) on CodePen

Link to comment
Share on other sites

I don't know what was the issue but the overlay div wasn't getting height as it's parent in Firefox 58.0.2 so I cleaned up your html and moved scripts in Codepen's settings.


Trick is to scale up overlay div and set transformOrigin to '100% 100%' i.e. at the bottom right corner and then rotate overlay by 90 degrees.


@Artsx I updated demo and added z transform to the background animation and perspective to the parent.


See the Pen bLPNYz?editors=0010 by Sahil89 (@Sahil89) on CodePen


  • Like 4
Link to comment
Share on other sites

Hi Sahill,


Thank you for cleaning my codepen.

Even with your corrections the animation does not correspond to what I want, I wish that the background goes from left to right also, it pivots simply.

See the gif animated : http://www.noelshack.com/2018-10-1-1520274090-mar-05-2018-19-20-31.gif


Thank you for help !


@Sahil thx for update but it's still not expected results like a gif

Link to comment
Share on other sites

Hi @Artsx,


Sorry I think I was blind yesterday and didn't really realize overlay was animating to right with slight rotation. I hope I didn't sound unwelcoming, hope you enjoy using GSAP and your time on forum. Feel free to post your queries, we would be happy to help.


Just small update, in previous demo I was rotating overlay but a more reliable approach would be to animate skew, it is reliable because it will work with almost all dimensions.


See the Pen mXZjNm?editors=0010 by Sahil89 (@Sahil89) on CodePen


  • Like 4
Link to comment
Share on other sites

I think that's because Safari renders things in 3D space such that it affects [what basically acts like] z-index. So even if you set z-index of something SUPER high, if something else is closer to the "camera" in terms of its transforms (like translateZ()), it'll still be rendered in front. This is unique to Safari and it's pretty annoying sometimes. Totally unrelated to GSAP, of course. 


If you set transform: translateZ(110px) on the overlay, that seems to resolve the problem. 

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