GSAP - Responsive Corner Navigation

Developer
Pedro Tavares
Size
3,210 Kb
Views
12,144
  1. GSAP - Responsive Corner Navigation Previews
  2. GSAP - Responsive Corner Navigation HTML Codes
  3. GSAP - Responsive Corner Navigation CSS Codes
  4. GSAP - Responsive Corner Navigation JS Codes

How do I make an gsap - responsive corner navigation?

Regarding this GSAP forum thread.. What is a gsap - responsive corner navigation? How do you make a gsap - responsive corner navigation? This script and codes were developed by Pedro Tavares on 01 December 2022, Thursday.

GSAP - Responsive Corner Navigation Previews
IQ Test

GSAP - Responsive Corner Navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>GSAP - Responsive Corner Navigation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav> <div id="print" class="media-type"> <h2>Print</h2> </div> <div id="broadcast" class="media-type"> <h2>Broadcast</h2> </div> <div id="outdoor" class="media-type"> <h2>Outdoor</h2> </div> <div id="online" class="media-type"> <h2>Online</h2> </div>
</nav> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

GSAP - Responsive Corner Navigation - Script Codes CSS Codes

body { overflow: hidden; margin: 0; padding: 0; background-color: #afafaf;
}
h2 { font-size: 1rem;
}
nav > div { position: fixed; display: block; cursor: pointer; background: #fff; width: 275; height: 229px;
}
nav > div > h2 { position: absolute;
}
nav > #print { left: 0; top: 0;
}
nav > #print > h2 { right: 4%; bottom: 0;
}
nav > #broadcast { right: 0; top: 0;
}
nav > #broadcast > h2 { left: 4%; bottom: 0;
}
nav > #outdoor { left: 0; bottom: 0;
}
nav > #outdoor > h2 { right: 4%; top: 0;
}
nav > #online { right: 0; bottom: 0;
}
nav > #online > h2 { left: 4%; top: 0;
}

GSAP - Responsive Corner Navigation - Script Codes JS Codes

var vw = $(window).width(), vh = $(window).height();
var print = {id:"#print", start:{x:-50, y:-50, rot:15}, center:{x:1, y:1}, end:{x:-200, y:-200} }, broadcast = {id:"#broadcast", start:{x:50, y:-50, rot:-15}, center:{x:-1, y:1}, end:{x:200, y:-200} }, outdoor = {id:"#outdoor", start:{x:-50, y:50, rot:-15}, center:{x:1, y:-1}, end:{x:-200, y:200} }, online = {id:"#online", start:{x:50, y:50, rot:15}, center:{x:-1, y:-1}, end:{x:200, y:200} }, buttons = [print, broadcast, outdoor, online], sizes = [ {width:120, height:100}, {width:200, height:166}, {width:225, height:187}, {width:275, height:229} ], current = null, tween = null;
// Initial positioning of the buttons
buttons.forEach(initialSet);
function initialSet(element, index, array) { TweenMax.set(element.id, { xPercent:element.start.x, yPercent:element.start.y, rotation:element.start.rot });
}
// Click events
$(print.id).click(onClick);
$(broadcast.id).click(onClick);
$(outdoor.id).click(onClick);
$(online.id).click(onClick);
function onClick(e) { var trg = e.currentTarget; if(!tween) { current = checkTween(trg); // Move everyone out except the current one var remainder = buttons.filter(checkArray); remainder.forEach(moveOut); tween = createTween(current); } else { // Move everyone back except the current one - Do a check on the array for that var remainder = buttons.filter(checkArray); remainder.forEach(moveBack); // Rewind the main tween tween.reverse(); }
}
function checkTween(trg) { switch(trg.id) { case "print": return print; case "broadcast": return broadcast; case "outdoor": return outdoor; case "online": return online; }
}
function checkArray(value) { return value != current;
}
function moveOut(element) { TweenMax.to(element.id, 0.7, { x:element.end.x, y:element.end.y, ease:Power2.easeInOut });
}
function moveBack(element) { TweenMax.to(element.id, 0.7, { x:0, y:0, ease:Power2.easeInOut });
}
function createTween(element, progress, reversed) { return TweenMax.fromTo(element.id, 1, { width:sizes[getIndex()].width, height:sizes[getIndex()].height }, { bezier:[ {x:0, y:0}, {x:(element.center.x*vw)/4, y:(element.center.y*vh)/2.5}, {x:(element.center.x*vw)/2, y:(element.center.y*vh)/2} ], rotation:0, width:"80vw", height:"80vh", ease:Power2.easeInOut, onReverseComplete: function() { // Flush the tween tween = null; } }) .progress(progress || 0) .reversed(reversed || false);
}
function getIndex() { if(vh <= 200 ) { return 0; } else if (vh > 200 && vh <= 400) { return 1; } else if ( vh > 400 && vh <= 600) { return 2; } else { return 3; }
}
// Window events
$(window).resize(resize);
// Call resize once to make sure the buttons are of correct size
resize();
function resize() { // Update the center of the screen vw = $(window).width(); vh = $(window).height(); TweenMax.to(".media-type", 0.3, {width:sizes[getIndex()].width, height:sizes[getIndex()].height}); if(tween) { // Grab tween's progress and record it var progress = tween.progress(), reversed = tween.reversed(); // Recreate the tween tween.pause(0); tween = createTween(current, progress, reversed); }
}
GSAP - Responsive Corner Navigation - Script Codes
GSAP - Responsive Corner Navigation - Script Codes
Home Page Home
Developer Pedro Tavares
Username dipscom
Uploaded December 01, 2022
Rating 3
Size 3,210 Kb
Views 12,144
Do you need developer help for GSAP - Responsive Corner Navigation?

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!

Pedro Tavares (dipscom) Script Codes
Name
Falling tomatoes
Catch Me If You Can
Mask Within Mask
Buttons.js - Example
Russian Doll
GSAP - Fun with Cycle and Bezier
GSAP - Fun with Cycle and Bezier 2
SVG Grid Mask - With Color effect
Responsive Animated Moving Things
SVGText - Pattern Fill
Create amazing captions 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!