wipe transition effect

[SyedahRabiaShah 0 Likes (Newbie)]

How can i expand a clip from top right corner in css n pure java script.
As shown in image.

 

[Rodrigo 5,044 Likes (Superhero)]

Hi,

 

Absolutely, you can use the clip property to do so. You can check how it works here:

 

https://developer.mozilla.org/en-US/docs/Web/CSS/clip

 

http://css-tricks.com/almanac/properties/c/clip/

 

And a working GSAP sample with the code here(around the middle of the page):

 

http://www.greensock.com/css3/

 

Rodrigo.

[Carl 11,098 Likes (Superhero)]

Here is the CodePen version of the clip demo:

http://codepen.io/GreenSock/pen/95240f579b822d3e3124b7e371dff221

[SyedahRabiaShah 0 Likes (Newbie)]

I exctly want this carl schooff,  but without any library

[SyedahRabiaShah 0 Likes (Newbie)]

Here is the CodePen version of the clip demo:

See the Pen 95240f579b822d3e3124b7e371dff221 by GreenSock (@GreenSock) on CodePen

 

 

Carl Schooff i want to use simple pur java script not any library..

[SyedahRabiaShah 0 Likes (Newbie)]

Hi Rodrigo,

I dont want all these,

i exctlly want the second one as in this link but with pur javascript. I dont want to include any library.

See the Pen 95240f579b822d3e3124b7e371dff221 by GreenSock (@GreenSock) on CodePen

[jamiejefferson 1,199 Likes (Superhero)]

This is a forum specifically for GreenSock's GSAP library.

 

Carl's solution only needs GSAP to accomplish this - jquery is used for a bit of selection and event management, but this isn't required. You can use regular javascript document.getElementById and onclick etc to trigger the tweens.

 

If you don't even want to utilise the GSAP library however, then you might have better luck on a more general javascript forum. We're focused on providing help and support to the GSAP library here.