Skip to content

Instantly share code, notes, and snippets.

Avatar
:octocat:
In 💗 with React and Vue

Vaibhav Khulbe Kvaibhav01

:octocat:
In 💗 with React and Vue
View GitHub Profile
@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 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;
@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 / 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>