Jump to content
Search Community

Diagonal mask between 2 images

rob.janssen 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 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

Link to comment
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
Link to comment
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
Link to comment
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!

Link to comment
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 ?editors=0010 by osublake (@osublake) on CodePen

 

 

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