GSAP rising block with reflection
How do I make an gsap rising block with reflection?
Based off of https://twitter.com/anatudor/status/696067669313921025. What is a gsap rising block with reflection? How do you make a gsap rising block with reflection? This script and codes were developed by Amanda Cheung on 15 November 2022, Tuesday.
GSAP rising block with reflection - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>GSAP rising block with reflection</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="box"> <div class="side--left side"></div> <div class="side--right side"></div> <div class="side--left side--reflection"></div> <div class="side--right side--reflection"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
GSAP rising block with reflection - Script Codes CSS Codes
#box { position: relative; left: 50%;
}
#box:before { content: ''; position: absolute; height: 0; width: 0; border: 30px solid transparent; border-left: 70px solid rgb(255,20,147);
}
#box:after { content: ''; position: absolute; top: 0; left: -100px; height: 0; width: 0; border: 30px solid transparent; border-right: 70px solid rgb(255,20,147);
}
.side--left { position: absolute; top: 45px; left: -70px; width: 70px; height: 200px; background-color: rgb(204,16,118); transform: skewY(23deg);
}
.side--right { position: absolute; top: 45px; width: 70px; height: 200px; background: rgb(230,18,133); transform: skewY(-23deg);
}
.side--reflection { top: 245px;
}
.side--reflection.side--left { background-color: rgba(204,16,118,.25);
}
.side--reflection.side--right { background-color: rgba(230,18,133,.25);
}
GSAP rising block with reflection - Script Codes JS Codes
var button = $("#button"), box = $("#box"), sides = $(".side"), reflections = $(".side--reflection"), tl = new TimelineLite(); tl.to(box, 1, {top: "200px", repeat: -1, yoyo: true}) .to(sides, 1, {height: "0", repeat: -1, yoyo: true}, 0) .to(reflections, 1, {top: "45px", height: "0", repeat: -1, yoyo: true}, 0);
Developer | Amanda Cheung |
Username | acacheung |
Uploaded | November 15, 2022 |
Rating | 3 |
Size | 2,516 Kb |
Views | 12,144 |
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!
Name | Size |
GSAP chomping cheezburger | 5,008 Kb |
Multi-step GSAP animation | 2,668 Kb |
GSAP stagger cheezburger | 4,972 Kb |
Hello responsive logo | 1,588 Kb |
Transparent tooltip with border | 1,927 Kb |
Dobot wireframe | 1,507 Kb |
Click nav to back arrow | 2,066 Kb |
GSAP rising block | 2,417 Kb |
Open close icon animation | 1,822 Kb |
A Pen by Amanda Cheung | 1,572 Kb |
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!
Name | Username | Size |
Experiments with Vertical Centering | KatieK2 | 3,924 Kb |
Page Transitions in Backbone | Mikefowler | 3,691 Kb |
Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
Dice | Fraina | 5,026 Kb |
Spiralator 9000 | AdmiralPotato | 4,671 Kb |
Retina canvas w. resize | Erikterwan | 1,882 Kb |
Elephants Full screen site | Orrinward | 3,981 Kb |
Scifi-style Interative Form | Aaronchuo | 4,566 Kb |
Material design buttons | Fischaela | 4,381 Kb |
Simple Login Form | JoshBlackwood | 4,418 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!