https://animation-popmotion-tween1.glitch.me/
Popmotion is a low-level, functional JavaScript motion library.
It allows developers to animate in any JavaScript environment (browser, Node), to any render target (CSS, SVG, Three.js, canvas, etc).
Note: If you’re looking for React animation, you’re probably after the Motion library. For absolute animation freedom, carry on reading!
In this simple introductory guide we’re going to install Popmotion and use it to animate a DOM element using the tween animation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="inner">
<h1>#521FB1</h1>
<p>White Fonts</p>
<form>
<span class="msg">Full name please!</span>
<input type="text" placeholder="#ECD9C5" class="txtfld">
<input type="text" placeholder="#ECD9C5" class="txtfld">
<input type="submit" value="#F51E79" class="btn">
</form>
</div>
</div>
<script src="https://unpkg.com/popmotion@8.1.24/dist/popmotion.global.min.js"></script>
<script> //querySelector is a pure Javacript selector to select our class
const container = popmotion.styler(document.querySelector('.container'))//"popmotion" if the specific reference to popmotion library methods. If using React or Vue, then would not do this.
const formElements = popmotion.styler(document.querySelector('.inner'))
const mgsPop = popmotion.styler(document.querySelector('.msg'))
popmotion.tween({ //https://popmotion.io/api/tween/
from: {
scale: .7, //this is starting size
opacity: 0, //this is starting opacity
y: -300 //this is starting postion
},
to: {
scale: 1, //this is end size
opacity: 1, //this is end opacity for fading in effect
y: 0 //this is end position
},
duration: 1000
}).start(container.set) //"container" here refers to the above vairable "container" which references the ". container" class and set the properties of the tween animation to that container.
</script>
</body>
</html>
Comments