Skip to content

Instantly share code, notes, and snippets.

:octocat:
In 💗 with Flutter ⚡ & React ⚛

Vaibhav Khulbe Kvaibhav01

:octocat:
In 💗 with Flutter ⚡ & React ⚛
Block or report user

Report or block Kvaibhav01

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@Kvaibhav01
Kvaibhav01 / style.css
Created Jan 6, 2019
CSS Text Background animation
View style.css
body {
font-family: Monstserrat, sans-serif;
background: #000;
color: #fff;
overflow: hidden;
}
.container {
display: flex;
flex-direction: column;
@Kvaibhav01
Kvaibhav01 / anime.js
Last active Sep 20, 2019
JS code for AnimeJS demo
View anime.js
var btn = document.getElementById('cta');
var btn2 = document.getElementById('cta2');
btn.onclick = function () {
var morphing = anime({
targets: '.polymorph',
points: [
{ value: '215, 110 0, 110 0, 0 47.7, 0 67, 76' },
{ value: '215, 110 0, 110 0, 0 0, 0 67, 76' }
],
@Kvaibhav01
Kvaibhav01 / style.css
Created Jul 10, 2018
CSS code for AnimeJS demo
View style.css
body {
margin: 0;
font-family: "Montserrat";
}
.polymorph {
fill: #398f5a;
}
#cta, #cta2{
@Kvaibhav01
Kvaibhav01 / indexWithoutAnimeJS.html
Created Jul 10, 2018
HTML file without Anime.JS
View indexWithoutAnimeJS.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>AnimeJS Demo</title>
<link rel="stylesheet" href="style.css">
</head>
@Kvaibhav01
Kvaibhav01 / animationCSS.css
Created Jul 3, 2018
CSS animation code snippet for animating with Keyframes extension
View animationCSS.css
@keyframes divAnimation{
0%{
transform: rotate(0) translateY(-15%);
opacity: 0;
}
100%{
transform: rotate(0) translateY(0%);
opacity: 1;
}
}
@Kvaibhav01
Kvaibhav01 / styleWithoutExtension.css
Created Jul 3, 2018
CSS file for animating with Keyframes extension without using the extension
View styleWithoutExtension.css
body{
background: #f1f1f1;
font-family: 'Montserrat', sans-serif;
margin: 0;
}
.container{
background: rgb(103, 170, 89);
padding: 5em;
color: #fff;
@Kvaibhav01
Kvaibhav01 / index.html
Created Jul 3, 2018
HTML file for animating with Keyframes extension
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Animate with extension</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
@Kvaibhav01
Kvaibhav01 / style.css
Created Jun 22, 2018
CSS file for landing page animation demo
View style.css
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,700'); /* import Montserrat font */
body, html{
font-family: 'Montserrat', sans-serif;
height: 100;
margin: 0;
}
body{
background: #F4F4F4 url('../assets/candlebg.svg');
@Kvaibhav01
Kvaibhav01 / index.html
Created Jun 22, 2018
HTML file for landing page animation demo
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CRYPTS-landing page</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
@Kvaibhav01
Kvaibhav01 / style.css
Created Jun 15, 2018
CSS file for Material ripple effect without JS
View style.css
.container {
background-color: #c1c1c1;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
.btn {
background-color: orange;
You can’t perform that action at this time.