Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
rob.janssen

Diagonal mask between 2 images

Recommended Posts

I want to create a diagonal mask between 2 images.

So from a diagonal line the other image pops up.

See attached image as example.

The "taste/12" logo is the first image.

Then the second image has to be shown starting from the center diagonal towards the edges.

Is this possible with GSAP?

Taste12-homepage-site-design-2.jpg

Share this post


Link to post
Share on other sites

Using what for the mask? HTML, SVG, canvas?

 

Using HTML, it's probably as simple as setting an image for the background. Placing a div with overflow hidden over that image. Put an image inside that div, rotate that div, counter rotate the image inside that div, and then animate the height of that div from 0.

 

I'm just guessing here. Set it up and see how it works. Something similar was shown in this thread.

 

  • Like 4

Share this post


Link to post
Share on other sites

Thanks for the response. HTML, SVG or canvas doesn't matter.

I'm most familiar with HTML.

I will try what you tell above. But both images need to stay put.

Share this post


Link to post
Share on other sites

Hi @rob.janssen

 

I tried my HTML idea. It works, but not well. Animating the height causes it to jitter because of rounding done by the browser. There is a CSS clip path property that would eliminate that problem, but browser support is pretty limited.

http://caniuse.com/#search=clip-path

 

So let's just do a clip path in SVG since it's easier to start with than canvas. The size of the images I'm using are 1920 x 1080, so just replace those values in the SVG and code with your own. 

 

See the Pen rzRyyE by osublake (@osublake) on CodePen

 

 

  • Like 4

Share this post


Link to post
Share on other sites

Hi @OSUblake

 

I've implemented your example and it's works pretty fine. Thanks again.

 

But i want to start the diagonal line at y coordinate 220.

See this example:

http://preview.taste12.nl/Test/Greensock.html

 

How can I avoid the black box in the top.

I want it run smoothly to the upper right corner. (If you know what I mean)

 

Thanks in advance!

Share this post


Link to post
Share on other sites

Hi,

 

This night I have dreamed of Pythagoras and the recent pen of @OSUblake:

 

See the Pen yoWxpj by mikeK (@mikeK) on CodePen

 

It was a good dream ...

 

Have a nice day

Mikel

 

  • Like 1

Share this post


Link to post
Share on other sites
11 hours ago, mikel said:

This night I have dreamed of Pythagoras and the recent pen of @OSUblake:

 

Hehe. That's exactly what I tried doing, but putting an image inside the overflow container shakes a little because of the centering.

 

On 9/6/2017 at 9:54 AM, rob.janssen said:

But i want to start the diagonal line at y coordinate 220.

See this example:

http://preview.taste12.nl/Test/Greensock.html

 

How can I avoid the black box in the top.

I want it run smoothly to the upper right corner. (If you know what I mean)

 

You can change the points so the triangle that it forms extends beyond the screen. I've zoomed out and outlined it in red so you can see what's going on. 

 

See the Pen 29d921ecb343d573c7bc6eb009e59160 by osublake (@osublake) on CodePen

 

 

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×