CSS Clip: Hide / Show Child Item Effect (Courtain)

Check out “Clip” part of following page:

Example:

http://codepen.io/GreenSock/pen/17b1ea88b3066d2ee4de90cc65fc862e

Sample Code:

var tl = new TimelineMax({'onComplete': function(){
	$this.css('z-index', 0);
}});
var p = {
	top: 0, 
	right: (visual_width + offset) + 'px', 
	bottom: $(window).height() + 'px', 
	left: offset + 'px'
}
tl.to($this, duration, {'clip': 'rect(' + 
		p.top + ', ' + p.right + ', ' + p.bottom + ', ' + p.left + 
	')'});

var tl = new TimelineMax({'onComplete': function(){

$this.css('z-index', 0);

}});

var p = {

top: 0,

right: (visual_width + offset) + 'px',

bottom: $(window).height() + 'px',

left: offset + 'px'

}

tl.to($this, duration, {'clip': 'rect(' +

p.top + ', ' + p.right + ', ' + p.bottom + ', ' + p.left +

')'});

(http://www.ecotreasure.com.tw/)

M	T	W	T	F	S	S
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Rex's Personal Site

This site is built on WordPress and contains personal notes, photos and videos

CSS Clip: Hide / Show Child Item Effect (Courtain)