Progressively reveal dots on a Bezier curve

Developer
Revolution Graphics
Size
7,323 Kb
Views
18,216
  1. Progressively reveal dots on a Bezier curve Previews
  2. Progressively reveal dots on a Bezier curve HTML Codes
  3. Progressively reveal dots on a Bezier curve CSS Codes
  4. Progressively reveal dots on a Bezier curve JS Codes

How do I make an progressively reveal dots on a bezier curve?

Answers a question in the GreenSock forums: http://forums.greensock.com/topic/7251-plot-elements-and-or-draw-along-a-bezier-path/#entry27130. What is a progressively reveal dots on a bezier curve? How do you make a progressively reveal dots on a bezier curve? This script and codes were developed by Revolution Graphics on 01 October 2022, Saturday.

Progressively reveal dots on a Bezier curve Previews
IQ Test

Progressively reveal dots on a Bezier curve - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Progressively reveal dots on a Bezier curve</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="intro-video"> <img class="imga" src="http://localhost/epiphany/wp-content/themes/rg/library/images/kentucky-commercial-residential.jpg" alt="" /> <h2 class="h2a">Commercial Residential</h2> <img class="imgb" src="http://localhost/epiphany/wp-content/themes/rg/library/images/improve-indoor-air-barrier-system.jpg" alt="" /> <h2 class="h2b">Improve Indoor Air Quality</h2> <img class="imgc" src="http://localhost/epiphany/wp-content/themes/rg/library/images/environment-friendly-foam-2.jpg" alt="" /> <div class="h2c-c"><h2 class="h2c">Conserve Energy</h2></div> <img class="imgd" src="http://localhost/epiphany/wp-content/themes/rg/library/images/the-right-choice-insulation.jpg" alt="" /> <div class="h2d-c"><h2 class="h2da">The right choice for you</h2><h2 class="h2db">and the environment</h2></div> <div class="logo-c"> <svg class="e-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="122.3" viewBox="-1.5 -1.5 120 122.3" enable-background="new -1.5 -1.5 120 122.3"><path fill="#010101" d="M90.8 99.4c-7.3 3.4-20.1 7.3-37 .8-13.8-5.2-22.3-14.3-29-25.9-4.8-8.3-11.3-26.9.7-47.2 11.2-18.9 36.2-22.6 53.9-11.8 8.6 5.3 15.6 14.2 17.3 24.3 1.6 9.5-.9 21.2-10 26.5-9.8 5.7-21.2 3.7-29-4.4-3.8-4-5.5-8.5-5.4-14 .2-11.2 10.6-19.8 17.9-10.4 1.4 1.7 3.3 5.2 2.3 7.5-1.2 2.6-4.3.5-5.5-.7-2.5-2.4-5-4.8-7.3-7.7-2.6 1.4-6.8 5.7-5.8 14.4.6 5.9 5 10.4 8.6 12.2 15.3 8.1 28.2-2.4 28.7-15.9.5-13-10.3-26-22.6-29.4-10.2-2.7-21.5-1.6-29.7 5.3-18.1 15.2-13 44.2 2.4 59.2 21.8 21.4 62.3 9.4 66.8-21.1 3.2-22.3-8.4-42.2-27.2-53.6-17-10.2-42.6-10.4-58.8 2.1-11.9 9.1-25.6 27.1-21.3 56.6 5.2 34.6 37.9 52.4 61.6 53.1 16.7.5 34.7-6.3 46-23.6 10-15.3 9.8-35.7 8.3-42.7 1.1 13.5-2.9 35.8-25.9 46.4z"/></svg> <svg class="e-logo-text" xmlns="http://www.w3.org/2000/svg" width="117.5" height="47.3" viewBox="0 34.8 117.5 47.3" enable-background="new 0 34.8 117.5 47.3"><path d="M13.5 51h-6.7l-.7 3.6h7.5l-.8 4.1h-12.3l3.6-19.1h12l-.8 4.1h-7.2l-.6 3.2h6.7l-.7 4.1zm.5 13.3l2.7-13.9c.3-1.7.6-4.3.8-5.7h4.3l-.2 1.9h.1c1.1-1.4 2.7-2.1 4.2-2.1 3 0 4.5 2.4 4.5 5.4 0 4.8-3.1 9.2-8 9.2-.9 0-1.9-.3-2.4-.6h-.1l-1.1 5.9-4.8-.1zm6.6-9.5c.4.4.9.6 1.5.6 1.8 0 3.2-2.8 3.2-5.2 0-.9-.4-1.9-1.4-1.9-1.4 0-2.4 1.5-2.8 3.7l-.5 2.8zm10.2 3.9l2.7-13.9h4.8l-2.7 13.9h-4.8zm3.3-17.6c0-1.6 1.3-2.6 2.7-2.6 1.4 0 2.3.9 2.3 2.2 0 1.7-1.3 2.6-2.8 2.6-1.2 0-2.2-.8-2.2-2.2zm3.1 23.2l2.7-13.9c.3-1.7.6-4.3.8-5.7h4.3l-.2 1.9h.1c1.1-1.4 2.7-2.1 4.2-2.1 3 0 4.5 2.4 4.5 5.4 0 4.8-3.1 9.2-8 9.2-.9 0-1.9-.3-2.4-.6h-.2l-1.1 5.9-4.7-.1zm6.7-9.5c.4.4.9.6 1.5.6 1.8 0 3.2-2.8 3.2-5.2 0-.9-.4-1.9-1.4-1.9-1.4 0-2.4 1.5-2.8 3.7l-.5 2.8zm10.3 3.9l3.8-20.1h4.8l-1.4 7.7h.1c1.1-1.1 2.4-1.9 4.2-1.9 2.4 0 3.5 1.6 3.5 3.8 0 .6-.1 1.7-.3 2.6l-1.5 7.9h-4.8l1.4-7.5c.1-.5.1-1.1.1-1.7 0-.8-.3-1.3-1.1-1.3-1.2 0-2.4 1.6-2.9 4.2l-1.1 6.2-4.8.1zm24.8 0l.1-2.4h-.1c-1.2 2.1-2.9 2.7-4.4 2.7-2.5 0-4.3-1.9-4.3-5 0-4.7 2.9-9.6 10.1-9.6 1.8 0 3.7.4 5 .8l-1.5 7.3c-.3 1.5-.6 4.4-.5 6.2h-4.4zm1-10.6c-.3-.1-.6-.1-.9-.1-2.2 0-3.7 3-3.7 5.1 0 1.3.6 2 1.4 2 .9 0 2-.9 2.7-4.2l.5-2.8zm5.7 10.6l1.7-9.2c.4-1.9.6-3.4.8-4.7h4.2l-.2 2.2h.1c1.4-1.7 3-2.4 4.7-2.4 2.5 0 3.6 1.6 3.6 3.8 0 .6-.1 1.7-.2 2.4l-1.6 8h-4.8l1.4-7.5c.1-.4.1-1 .1-1.4 0-.8-.3-1.4-1.1-1.4-1.2 0-2.4 1.5-2.9 4.5l-1.1 6-4.7-.3zm21.4-13.9l.6 5.5c.1 1.4.3 2.4.4 3.2h.1c.3-.8.5-1.7 1.1-3.2l2.1-5.5h5.1l-4.8 9.8c-2 4-3.7 6.5-5.6 8.2-1.7 1.5-3.7 2.2-4.7 2.4l-1.1-4.2c.6-.1 1.5-.5 2.3-1 .9-.6 1.7-1.3 2.1-2.1.1-.2.1-.4.1-.6l-2.7-12.5h5zm-36.2 18.6l-1.8 6.2c1.2 0 2-.1 2.4-.1.6-.1 1.1-.4 1.7-.8.5-.4.9-.9 1.2-1.7h.5l-1.9 6.5h-.5c.1-.4.1-.8.1-1 0-.5-.1-.9-.3-1.2-.2-.3-.5-.5-.8-.6-.4-.1-1.2-.2-2.7-.2l-1.4 5.2-.3 1c-.1.2-.1.4-.1.6 0 .3.1.5.1.6.1.1.3.3.5.4.2.1.6.1 1.3.1l-.1.4h-8.1l.1-.4c.8 0 1.4-.1 1.7-.4.4-.3.7-.9 1-1.9l2.9-10c.3-1.1.5-1.7.5-2 0-.3-.1-.5-.4-.7-.3-.2-.8-.3-1.7-.4l.1-.4h13.6l-1.1 4.4h-.4c-.1-.9-.2-1.6-.4-2-.2-.4-.6-.8-1.1-1-.6-.2-1.4-.4-2.6-.4l-2-.2zm12.1 4.3c.6 0 1.2.1 1.8.4.6.3 1 .7 1.3 1.2.3.5.4 1.1.4 1.7 0 1.3-.4 2.7-1.1 3.9s-1.7 2.4-2.9 3.1c-1.2.8-2.4 1.1-3.6 1.1-1.1 0-1.9-.4-2.6-1-.6-.6-.9-1.4-.9-2.4 0-1.1.2-2.2.6-3.2.4-1 1-1.9 1.7-2.6.7-.7 1.5-1.3 2.4-1.8 1-.2 2-.4 2.9-.4zm-.5.6c-.4 0-.8.1-1.1.4-.6.5-1.2 1.7-1.9 3.6-.7 1.9-1.1 3.6-1.1 5.1 0 .4.1.6.4.9.2.3.5.4.8.4.3 0 .6-.1.9-.3.4-.3.8-.9 1.3-1.9.5-1 .9-2.2 1.3-3.4s.5-2.4.5-3.4c0-.4-.1-.7-.3-1-.3-.2-.5-.4-.8-.4zm15.5-.5l-2.4 8.1-.2 1-.1.3c0 .1 0 .2.1.3.1.1.1.1.2.1s.4-.1.7-.4l.9-1.1.4.2c-.6 1.1-1.2 1.8-1.9 2.3-.6.5-1.4.7-2.1.7-.4 0-.8-.1-1.1-.4-.2-.2-.4-.6-.4-.9 0-.3.1-.9.4-1.8l.3-1c-.9 1.6-1.9 2.7-2.7 3.4-.5.4-1 .6-1.6.6-.7 0-1.3-.3-1.7-.9s-.5-1.3-.5-2.1c0-1.1.4-2.4 1.1-3.9.7-1.5 1.7-2.7 2.7-3.6.9-.7 1.8-1.1 2.7-1.1.4 0 .8.1 1.1.4.3.3.5.7.6 1.4l.4-1.5 3.1-.1zm-3.9 2.4c0-.6-.1-1.1-.3-1.4-.1-.2-.4-.3-.6-.3-.2 0-.5.1-.8.4-.6.5-1.1 1.5-1.8 3-.6 1.5-.9 2.9-.9 3.9 0 .4.1.7.2.9.1.2.3.3.5.3.4 0 .7-.2 1.1-.6.5-.6 1-1.4 1.4-2.2.8-1.5 1.2-2.9 1.2-4zm9.7-2.5l-1.6 5.2c1.1-1.6 1.8-2.7 2.3-3.2.7-.8 1.3-1.4 1.7-1.6.4-.2.9-.4 1.4-.4.5 0 .9.1 1.1.5.2.3.4.6.4 1.1 0 .4-.1 1-.4 1.7l-.6 1.9c1.1-1.7 1.9-2.7 2.4-3.2.8-.8 1.4-1.4 2-1.7.4-.2.8-.3 1.2-.3.4 0 .9.1 1.1.5.3.3.4.7.4 1.2s-.1 1.1-.4 2l-1.5 4.5c-.2.6-.4 1.1-.4 1.3 0 .1 0 .1.1.1l.1.1c.1 0 .1 0 .2-.1.3-.2.6-.6.9-1l.4-.4.4.3c-.6 1-1.1 1.8-1.9 2.2-.6.5-1.3.7-1.9.7-.5 0-.9-.1-1.2-.4-.3-.3-.4-.6-.4-.9s.1-.9.4-1.6l1.5-4.7c.2-.6.3-1.1.3-1.2 0-.1 0-.1-.1-.1-.1-.1-.1-.1-.2-.1s-.2 0-.4.1c-.1.1-.4.3-.8.6-.4.4-.9.9-1.6 1.8-.6.9-1.1 1.6-1.4 2.1-.2.5-.5 1.1-.7 1.9l-.8 2.5h-3.1l2.4-7.9c.1-.4.2-.7.2-.9 0-.1 0-.1-.1-.1l-.1-.1c-.3 0-.8.4-1.4 1.1-1 1.2-1.9 2.7-2.7 4.4l-1 3.4h-2.9l2.4-7.8c.2-.8.4-1.3.4-1.7 0-.1 0-.2-.1-.4-.1-.1-.2-.1-.4-.2.1.1-.2.1-.6.1l.1-.4 4.2-.7h.6l.1-.2z"/></svg> </div> <svg class="replay" xmlns="http://www.w3.org/2000/svg" width="67.5" height="67.5" viewBox="0 0 67.5 67.5"><path d="M60.9 33.8c0-15-12.2-27.2-27.2-27.2-6.9 0-13.3 2.6-18.1 6.9l7.2 8.3c2.9-2.6 6.7-4.3 10.9-4.3 8.9 0 16.2 7.3 16.2 16.2h-6.3l11.8 15.8 11.8-15.8h-6.3zM33.8 49.9c-8.9 0-16.2-7.3-16.2-16.2v-.3h6.3l-11.8-15.7-11.8 15.8h6.3v.3c0 15 12.2 27.2 27.2 27.2 7 0 13.4-2.7 18.2-7l-7.2-8.3c-2.9 2.5-6.8 4.2-11 4.2z"/></svg>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Progressively reveal dots on a Bezier curve - Script Codes CSS Codes

body { background-color: black;
}
* { box-sizing: border-box;
}
.intro-video { margin: auto; width: 350px; height: 262px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden;
}
.intro-video img { position: absolute; width: 100%; max-width: 100%; height: auto; vertical-align: bottom;
}
.intro-video h2 { font-size: 1.5rem; line-height: 2rem; background: rgba(255, 255, 255, 0.7); position: absolute; text-align: center; margin: auto; width: 90%; left: 0; right: 0; margin-top: 5%; color: #004974; padding: 0 8px;
}
.intro-video .h2c, .intro-video .h2da, .intro-video .h2db { position: absolute; margin-top: auto; margin-bottom: 5%; bottom: 0;
}
.intro-video .h2c-c, .intro-video .h2d-c { position: absolute; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}
.intro-video .h2da { width: auto; margin-top: 5%; margin-left: 5%; bottom: auto; right: auto;
}
.intro-video .h2db { margin-right: 5%; width: auto; left: auto;
}
.dot { position: absolute; width: 10px; height: 10px; background-color: #fff; border-radius: 50%; visibility: hidden; z-index: 1;
}
.logo-c { width: 117px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: 166px; z-index: 2;
}
.replay { position: absolute; width: 30px; height: 30px; right: 2px; bottom: 2px; cursor: pointer; fill: #004974; z-index: 2;
}

Progressively reveal dots on a Bezier curve - Script Codes JS Codes

function initCSS() { TweenLite.set('.replay', {autoAlpha:0, transformOrigin: "50% 50%"}); TweenLite.set('.intro-video h2', {transformPerspective: 600,transformOrigin: "50% 0%" }); TweenLite.set('h2.h2a', {rotationX: -90}); TweenLite.set('h2.h2b', {transformPerspective: 200, transformOrigin: "50% 50% -300px", rotationX: 0, rotationY: -90, display: 'none'}); TweenLite.set('img.imgc', {transformPerspective: 600, rotationY: 180, display: 'none'}); TweenLite.set(["img.imgb",'img.imgc'], {backfaceVisibility:"hidden", transformPerspective: 600}); TweenLite.set('.h2c-c', {transformPerspective: 600, transformOrigin: "50% 50% -100px", rotationX: 0, rotationY: 180, backfaceVisibility:"hidden"}) TweenLite.set('.h2c-c h2.h2c', {transformPerspective: 0}); TweenLite.set(["img.imgd",".h2d-c"], {yPercent:100, display: 'none'}); TweenLite.set(".logo-c", {perspective:600});
TweenLite.set([".e-logo",".e-logo-text"], {transformOrigin: "50% 50% 0", autoAlpha:0});
} var grow1 = 0; Points = 0; path = 0; if (matchMedia) {	var mq = window.matchMedia("(-webkit-min-device-pixel-ratio: 1.5),(-moz-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)");	mq.addListener(WidthChange);	WidthChange(mq);
}
// media query change
function WidthChange(mq) {	if (mq.matches) {	// window width is at least 500px grow1 = 13; $(".intro-video").css({'width':'700px' , "height" : '502px'}); ////////////////////////////////////////////////////////////////////// Points=[{x:0.4, y:55.8}, {x:0.4, y:55.8}, {x:615.6999999999999, y:56.599999999999994}, {x:640.4, y:56.4}, {x:693, y:55.8}, {x:685.3, y:77.9}, {x:685.3, y:104.3}, {x:685.3, y:130.7}, {x:665.8, y:152.2}, {x:640.4, y:152.2}, {x:615, y:152.2}, {x:40.10000000000002, y:152.2}, {x:40.10000000000002, y:152.2}, {x:15.2, y:152.2}, {x:-5, y:173.7}, {x:-5, y:200.1}, {x:-5, y:226.5}, {x:15.2, y:248.2}, {x:39.9, y:248.2}, {x:39.9, y:248.2}, {x:640.6, y:247.39999999999998}, {x:640.6, y:247.39999999999998}, {x:665.3000000000001, y:247.39999999999998}, {x:685.5, y:268.9}, {x:685.5, y:295.29999999999995}, {x:685.5, y:321.69999999999993}, {x:665.3, y:343.19999999999993}, {x:640.6, y:343.19999999999993}, {x:640.6, y:343.19999999999993}, {x:641.2, y:343.19999999999993}, {x:641.2, y:343.19999999999993}, {x:641.2, y:343.19999999999993}, {x:65, y:343.19999999999993}, {x:40.30000000000007, y:343.19999999999993}, {x:15.600000000000136, y:343.19999999999993}, {x:-4.59999999999993, y:364.69999999999993}, {x:-4.59999999999993, y:391.0999999999999}, {x:-4.59999999999993, y:417.4999999999999}, {x:16.10000000000007, y:439.3999999999999}, {x:40.30000000000007, y:439.3999999999999}, {x:64.50000000000007, y:439.3999999999999}, {x:706.5000000000001, y:439.3999999999999}, {x:706.5000000000001, y:439.3999999999999}], path = [{x:0.4, y:55.8}];
//////////////////////////////////////////////////////////////////////	}	else {	// window width is less than 500px grow1 = 8; ////////////////////////////////////////////////////////////////////// Points=[{x:17.6, y:19.8}, {x:17.6, y:19.8}, {x:319, y:20.1}, {x:319, y:20.1}, {x:332.1, y:20.1}, {x:342.8, y:31.5}, {x:342.8, y:45.5}, {x:342.8, y:59.5}, {x:332.1, y:70.9}, {x:319, y:70.9}, {x:319, y:70.9}, {x:25.9, y:70.9}, {x:25.9, y:70.9}, {x:12.7, y:70.9}, {x:2, y:82.3}, {x:2, y:96.3}, {x:2, y:110.3}, {x:12.7, y:121.8}, {x:25.8, y:121.8}, {x:25.8, y:121.8}, {x:319.1, y:121.4}, {x:319.1, y:121.4}, {x:332.2, y:121.4}, {x:342.9, y:132.8}, {x:342.9, y:146.8}, {x:342.9, y:160.8}, {x:332.2, y:172.2}, {x:319.1, y:172.2}, {x:319.1, y:172.2}, {x:319.4, y:172.2}, {x:319.4, y:172.2}, {x:319.4, y:172.2}, {x:26, y:172.2}, {x:26, y:172.2}, {x:12.9, y:172.2}, {x:2.2, y:183.6}, {x:2.2, y:197.6}, {x:2.2, y:211.6}, {x:12.9, y:223.2}, {x:26, y:223.2}, {x:26, y:223.2}, {x:341.7, y:222.76}, {x:341.7, y:222.76}]; path = [{x:17, y:19.8}];
//////////////////////////////////////////////////////////////////////	}
}
//////////////////////////////////////////////////////////////////////
function box1() { var tl = new TimelineMax(); tl.from("img.imga", 2, {autoAlpha:0}) .to('h2.h2a', 2, { rotationX: 0, force3D:true, ease:Elastic.easeOut},"-=.8") .from("img.imgb", 2, {xPercent:100, force3D:true, ease:Elastic.easeOut}) .to('h2.h2b', 3, {display: 'inline', rotationY: 0, force3D:true, ease:Elastic.easeOut}, "-=1.2") .to("img.imgb", 3, {rotationY:-180, force3D:true, ease:Elastic.easeInOut}) .to('h2.h2b', 3, {backfaceVisibility:"hidden",transformPerspective: 600, display: 'none', rotationY: -180, force3D:true, ease:Elastic.easeInOut}, "-=3") .to("img.imgc", 3, {display: 'inline',rotationY:0, force3D:true, ease:Elastic.easeInOut}, "-=3") .to(".h2c-c", 3, {rotationY:0, force3D:true, ease:Elastic.easeInOut}, "-=2.9") .to(".h2c-c", 1, { yPercent:-100,force3D:true, ease:Back.easeIn}) .to(".imgc", 1.1, { yPercent:-100,force3D:true, ease:Back.easeOut}, "-=0.35" ) .to(".imgd", 1, { display: 'inline',yPercent:0,force3D:true, ease:Back.easeOut},"-=1") .to(".h2d-c", 1, { display: 'inline',yPercent:0,force3D:true, ease:Back.easeOut}, "-=0.9" ) return tl;
}
//////////////////////////////////////////////////////////////////////
function box2() {	var quantity = 99,	position = {x:path[0].x, y:[path[0].y]},	tween = TweenMax.to(position, quantity, {bezier:{type:"soft", values:Points}, ease:Linear.easeNone}),	tlb = new TimelineMax(),	i, dot; tlb.timeScale(3)	path.shift();	for (i = 0; i < quantity; i++) {	tween.time(i);	dot = $("<div />", {id:"dot"+i}).addClass("dot").css({left:position.x+"px", top:position.y+"px"}).appendTo(".intro-video");	tlb.set(dot, {visibility:"visible",transformOrigin: "5px 5px", scale: 0},0.1)
////////////////////////////////////////////////////////////////////// if (i == 0){ tlb.to(dot, 4, {scale: grow1} ); }else{ tlb.to(dot, 4, {scale: grow1, ease:Power1.easeOut }, "-=3.9" ); }
////////////////////////////////////////////////////////////////////// } return tlb;
}
/////////////////////////////////////////////////////////////////////
function box3() { var tl = new TimelineMax();
tl.to(".e-logo", 1, {autoAlpha:1,rotationY:"360_cw", ease:Linear.easeNone}) .to(".e-logo", 0.3, {rotationY:"+=50_cw"}) .to(".e-logo", 1.5, {rotationY:"-=290_ccw"}) .to(".e-logo", 1.5, {rotationY:"+=20_cw"}) .to(".e-logo-text", 2,{autoAlpha:1}, "-=1.5"); return tl;
}
////////////////////////////////////////////////////
var $replay = $(".replay");
var repeatc = 1;
function showReplay(){
if (repeatc > 1){ TweenLite.to($replay, 0.5, {autoAlpha:1, rotation:"+=360_cw"}); }else{ repeatc++; timeline.restart(); }
}
///////////////////////////////////////////////////
$replay.mouseenter(function(e){ TweenLite.to($replay, 0.5, {rotation:"+=360_cw"});
})
$replay.mouseleave(function(e){ TweenLite.to($replay, 0.5, {rotation:"-=360_cw"});
})
$replay.click(function(){ timeline.restart(); initCSS();
});
///////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////
function MasterTimeline() { timeline = new TimelineMax({onComplete:showReplay});
// timeline.add(box1()) timeline.add(box2()) timeline.add(box3())
}
initCSS();
MasterTimeline();
/////////////////////////////////////////////////////////////////
$(window).resize(Resize); function Resize() { var $window = $(window) , maxWidth = $('.intro-video').width() , width = $window.width(), scale; if( width >= maxWidth ) { return } TweenMax.set('.intro-video',{scale: Math.min(width/maxWidth),transformOrigin:"0% 0%"});
};
Resize();
Progressively reveal dots on a Bezier curve - Script Codes
Progressively reveal dots on a Bezier curve - Script Codes
Home Page Home
Developer Revolution Graphics
Username rgfx
Uploaded October 01, 2022
Rating 3
Size 7,323 Kb
Views 18,216
Do you need developer help for Progressively reveal dots on a Bezier curve?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Revolution Graphics (rgfx) Script Codes
Name
Fancy Select Box
Call to action button
Flexbox Center Right justify
Simple Responsive Popup
Check Mark troggle
Cross browser radio buttons
Signature pad
CSS Background
Keep Image in Center of Div.
Custom Select Box 2
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!