Movin bodymovin

Developer
Kittons
Size
2,574 Kb
Views
91,080
  1. Movin bodymovin Previews
  2. Movin bodymovin HTML Codes
  3. Movin bodymovin CSS Codes
  4. Movin bodymovin JS Codes

How do I make an movin bodymovin?

Toggle between the Canvas and the Svg renders. These animations are exported from After Effects and animated with javascript. . What is a movin bodymovin? How do you make a movin bodymovin? This script and codes were developed by Kittons on 09 September 2022, Friday.

Movin bodymovin Previews
IQ Test

Movin bodymovin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Movin bodymovin</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="canvasContainer" class="container"></div>
<div id="svgContainer" class="container"></div>
<div id="switchContainer"> <canvas id="svgSwitch" width="100" height="30"></canvas> <div id="canvasSwitch"></div>
</div> <script src='https://labs.nearpod.com/bodymovin/demo/bm/bodymovin3.js'></script>
<script src='https://labs.nearpod.com/bodymovin/demo/bm/data.js'></script>
<script src='https://labs.nearpod.com/bodymovin/demo/bm/canvasSwitchData.js'></script>
<script src='https://labs.nearpod.com/bodymovin/demo/bm/svgSwitchData.js'></script> <script src="js/index.js"></script>
</body>
</html>

Movin bodymovin - Script Codes CSS Codes

body{ background-color: black; margin:0; overflow:hidden;
}
.container{ width:100%; height:100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto;
}
#switchContainer{ width:100px; height:30px; position: absolute; top: 20px; right: 20px; cursor: pointer;
}
#canvasSwitch{ width:100%; height:100%; display: none;
}

Movin bodymovin - Script Codes JS Codes

var canvasContainer = document.getElementById('canvasContainer'); var svgContainer = document.getElementById('svgContainer'); var canvasAnim = bodymovin.loadAnimation({ wrapper: canvasContainer, animType: 'canvas', loop: true, autoplay: false, prerender: false, animationData: JSON.parse(animationData) }); var svgAnim = bodymovin.loadAnimation({ wrapper: svgContainer, animType: 'svg', loop: true, autoplay: false, prerender: false, animationData: JSON.parse(animationData) }); var currentDisplay; var switchContainer = document.getElementById('switchContainer'); var canvasSwitch = document.getElementById('canvasSwitch'); var svgSwitch = document.getElementById('svgSwitch'); var canvasSwAnim = bodymovin.loadAnimation({ wrapper: canvasSwitch, animType: 'svg', loop: false, autoplay: false, prerender: false, animationData: JSON.parse(svgSwitchData) }); var svgSwAnim = bodymovin.loadAnimation({ animType: 'canvas', loop: false, autoplay: false, prerender: false, renderer:{ clearCanvas: true, context: svgSwitch.getContext('2d'), scaleMode: 'fit' }, animationData: JSON.parse(canvasSwitchData) }); function show(type){ currentDisplay = type; if(type == 'canvas'){ canvasContainer.style.display = 'block'; svgContainer.style.display = 'none'; canvasAnim.goToAndStop(svgAnim.currentFrame,true); svgAnim.pause(); canvasAnim.play(); canvasSwitch.style.display = 'block'; svgSwitch.style.display = 'none'; canvasSwAnim.goToAndStop(0); canvasSwAnim.play(); svgSwAnim.pause(); }else{ canvasContainer.style.display = 'none'; svgContainer.style.display = 'block'; svgAnim.goToAndStop(canvasAnim.currentFrame,true); canvasAnim.pause(); svgAnim.play(); svgSwitch.style.display = 'block'; canvasSwitch.style.display = 'none'; svgSwAnim.goToAndStop(0); svgSwAnim.play(); canvasAnim.pause(); } } function toggleDisplay(){ if(currentDisplay == 'canvas'){ show('svg'); }else{ show('canvas'); } } function resize(){ canvasAnim.resize(); } show('svg'); switchContainer.onclick = toggleDisplay; window.onresize = resize;
Movin bodymovin - Script Codes
Movin bodymovin - Script Codes
Home Page Home
Developer Kittons
Username airnan
Uploaded September 09, 2022
Rating 4.5
Size 2,574 Kb
Views 91,080
Do you need developer help for Movin bodymovin?

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!

Kittons (airnan) Script Codes
Name
Murally
Mc A from Beastie boys
Dotskin
Don dalek
Svg jou jou monster
Shapes
The Glitcher
A christmas loop in svg
After Effects to PIXI.js
Perricorn. a dog that was a unicorn
Create amazing Facebook ads with AI!

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!