Try to do block reveal with "diagonal"

[Artsx]

Hello,

 

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.
http://renvoye.com

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

 

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

[Sahil]

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

 

[Artsx]

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

[Sahil]

Ohk,  here is one last attempt.

 

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

 

[Artsx]

wow perfect ! thank you 

[Sahil]

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

 

[Artsx]

Hello @Sahil,

 

Thx a lot for your help, no problem for yesterday, you made my day with your help !

[Victor Work]

 

Taking advantage of the topic I remembered from this example here, which is a bit more complete:

 

http://www.espn.com/espn/feature/story/_/id/19742921/espn-body-issue-2017#!athletes_uswomensnationalhockeyteam

[Artsx]

Hello, it's again me, 

 

I noticed that it didn't work on Safari, an idea of why?

[GreenSock]

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. 

[Artsx]

Thx for a tip !

 

It works very well, now I try to understand why animation doesn't work on mobile device,