Animate in from an empty state
How do I make an animate in from an empty state?
What is a animate in from an empty state? How do you make a animate in from an empty state? This script and codes were developed by Wes Bos on 09 December 2022, Friday.
Animate in from an empty state - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animate in from an empty state</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <button class="add">+ Add A Notification</button>
<div class="notifications"> <div class="notification">Add one!</div>
</div>
<h2>Animate / transition in elements when they have content with `:not(:empty)`</h2>
<h2>FAQ</h2>
<p>Q: OMG WTF JUS ADD A CLASS!1</p>
<p>A: Just playing around with the `:empty` selector - reeeelaaax</p>
<p>Q: Neat!</p>
<p>A: Yeah, eh? Props to <a href="https://twitter.com/wldcordeiro/status/719546514981322752">@wldcordeiro</a> for showing me the :not(:empty) selector</p> <script src="js/index.js"></script>
</body>
</html>
Animate in from an empty state - Script Codes CSS Codes
/* The Sauce */
/* hide empty */
.notification:empty { -webkit-transform: translateX(100%); transform: translateX(100%);
}
/* Animate it in */
.notification:not(:empty) { -webkit-transform: translateX(0); transform: translateX(0);
}
/* Cool Styles */
html { font-family: sans-serif; background: mediumturquoise; padding: 20px;
}
button { background: firebrick; color: white; text-transform: uppercase; font-size: 20px; border: 0; padding: 20px;
}
.notifications { float: right;
}
.notification { margin: 20px; background: white; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); padding: 20px; -webkit-transition: all 0.35s; transition: all 0.35s; position: relative; border-radius: 2px; font-family: sans-serif; width: 300px;
}
Animate in from an empty state - Script Codes JS Codes
'use strict';
var addButton = document.querySelector('.add');
var notifications = document.querySelector('.notifications');
addButton.addEventListener('click', function () { var notification = document.createElement('div'); notification.classList.add('notification'); notifications.appendChild(notification); requestAnimationFrame(function () { notification.textContent = 'Oh shit - you\'re late!'; });
});
Developer | Wes Bos |
Username | wesbos |
Uploaded | December 09, 2022 |
Rating | 4 |
Size | 2,644 Kb |
Views | 10,120 |
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 |
Video Speed Scrubber | 2,782 Kb |
GetUserMedia Meets Voxel CSS | 3,178 Kb |
CSS Character Units | 1,756 Kb |
Web Speech Demo | 2,073 Kb |
A Pen by Wes Bos | 4,273 Kb |
Outline-offset | 2,013 Kb |
Responsive Flexbox Circles | 1,929 Kb |
WTFCSS | 2,038 Kb |
Update CSS Variables with JS | 2,335 Kb |
Animation with CSS Variables | 2,504 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 |
Hexagons | Ashmind | 4,360 Kb |
LeMandinque | Aadesida | 9,046 Kb |
Loading Bar | Jaradlight | 2,333 Kb |
E-mail Template | SoloMDFK | 4,871 Kb |
CSS eye follow | Pedrocampos | 2,592 Kb |
Obligatory CSS3 UI Nav | Romandiaz | 9,017 Kb |
A Pen by Rob Levin | Roblevin | 2,787 Kb |
JS Countdown Timer | Ayoungh | 2,435 Kb |
Awesome | Samarthpd | 2,901 Kb |
Pure CSS Tooltips | Mobius1 | 2,271 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!