TweenMax is the core plug-in of the GreenSock animation platform. GreenSock is a set of tools for making high-performance HTML5 animations in all major browsers. Today I will share with you a HTML5 3D love animation based on TweenMax. It is different from the love animation shared before in that the love will break after clicking the love, and it will recombine when you click the love.
Advertisement
<g id="heart" filter="url(#blur)">
<polygon fill="#D04646" points="1261.5,596.5 1258.5,807.5 1132.5,524.5 "/>
<polygon fill="#C93B3B" points="1261.5,596.5 1388.5,524.5 1258.5,807.5 "/>
<polygon fill="#E46565" points="1261.5,596.5 1266.5,447.5 1132.5,524.5 "/>
<polygon fill="#E46666" points="1266.5,447.5 1388.5,524.5 1261.5,596.5 "/>
<polygon fill="#DE5C5C" points="1266.5,447.5 1414.5,411.5 1388.5,524.5 "/>
<polygon fill="#DB5757" points="1266.5,447.5 1379.5,315.5 1414.5,411.5 "/>
<polygon fill="#CD4040" points="1414.5,411.5 1530.5,233.5 1379.5,315.5 "/>
<polygon fill="#BD2828" points="1414.5,411.5 1597.5,346.5 1530.5,233.5 "/>
<polygon fill="#A72121" points="1597.5,346.5 1749.5,262.5 1530.5,233.5 "/>
<polygon fill="#991F1F" points="1597.5,346.5 1703.5,401.5 1749.5,262.5 "/>
<polygon fill="#9F2020" points="1597.5,346.5 1707.5,486.5 1703.5,401.5 "/>
<polygon fill="#7A1C1C" points="1749.5,262.5 1875.5,420.5 1707.5,486.5 1703.5,401.5 "/>
<polygon fill="#6A1A1A" points="1707.5,486.5 1891.5,605.5 1875.5,420.5 "/>
<polygon fill="#761C1C" points="1707.5,486.5 1717.5,740.5 1891.5,605.5 "/>
<polygon fill="#5E1919" points="1717.5,740.5 1839.5,824.5 1891.5,605.5 "/>
<polygon fill="#901E1E" points="1707.5,486.5 1570.5,589.5 1609.5,733.5 1717.5,740.5 "/>
<polygon fill="#851D1D" points="1609.5,733.5 1508.5,930.5 1717.5,740.5 "/>
<polygon fill="#5E1919" points="1508.5,930.5 1652.5,997.5 1839.5,824.5 1717.5,740.5 "/>
<polygon fill="#9A1F1F" points="1609.5,733.5 1258.5,807.5 1508.5,930.5 "/>
<polygon fill="#7E1D1D" points="1258.5,807.5 1261.5,1043.5 1508.5,930.5 "/>
<polygon fill="#611919" points="1261.5,1043.5 1445.5,1081.5 1652.5,997.5 1508.5,930.5 "/>
<polygon fill="#5E1919" points="1261.5,1043.5 1267.5,1192.5 1445.5,1081.5 "/>
<polygon fill="#5E1919" points="1261.5,1043.5 1086.5,1081.5 1267.5,1192.5 "/>
<polygon fill="#5E1919" points="1261.5,1043.5 1016.5,930.5 880.5,995.5 1086.5,1081.5 "/>
<polygon fill="#851D1D" points="1258.5,807.5 1016.5,930.5 1261.5,1043.5 "/>
<polygon fill="#821D1D" points="1016.5,930.5 805.5,736.5 914.5,733.5 "/>
<polygon fill="#981F1F" points="914.5,733.5 1258.5,807.5 1016.5,930.5 "/>
<polygon fill="#5E1919" points="694.5,824.5 880.5,995.5 1016.5,930.5 805.5,736.5 "/>
<polygon fill="#5E1919" points="694.5,824.5 641.5,598.5 805.5,736.5 "/>
<polygon fill="#721B1B" points="641.5,598.5 819.5,486.5 805.5,736.5 "/>
<polygon fill="#951F1F" points="819.5,486.5 953.5,589.5 914.5,733.5 805.5,736.5 "/>
<polygon fill="#681A1A" points="658.5,416.5 641.5,598.5 819.5,486.5 "/>
<polygon fill="#C43232" points="1132.5,524.5 1258.5,807.5 914.5,733.5 953.5,589.5 "/>
<polygon fill="#C73737" points="1132.5,524.5 1109.5,416.5 953.5,589.5 "/>
<polygon fill="#DE5C5C" points="1109.5,416.5 1132.5,524.5 1266.5,447.5 "/>
<polygon fill="#D95555" points="1109.5,416.5 1153.5,315.5 1266.5,447.5 "/>
<polygon fill="#CB3D3D" points="1109.5,416.5 998.5,233.5 1153.5,315.5 "/>
<polygon fill="#C02C2C" points="1109.5,416.5 926.5,346.5 998.5,233.5 "/>
<polygon fill="#B42222" points="926.5,346.5 819.5,486.5 953.5,589.5 1109.5,416.5 "/>
<polygon fill="#9E2020" points="926.5,346.5 779.5,263.5 998.5,233.5 "/>
<polygon fill="#891E1E" points="779.5,263.5 826.5,401.5 926.5,346.5 "/>
<polygon fill="#9E2020" points="826.5,401.5 819.5,486.5 926.5,346.5 "/>
<polygon fill="#741B1B" points="779.5,263.5 658.5,416.5 819.5,486.5 826.5,401.5 "/>
<polygon fill="#C02C2C" points="1388.5,524.5 1570.5,589.5 1609.5,733.5 1258.5,807.5 "/>
<polygon fill="#C73737" points="1414.5,411.5 1570.5,589.5 1388.5,524.5 "/>
<polygon fill="#BA2323" points="1414.5,411.5 1597.5,346.5 1707.5,486.5 1570.5,589.5 "/>
</g>
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
height: 100vh;
background-color: #d5f3e6;
justify-content: center;
align-items: center;
}
#canvas {
height: 100vh;
width: 100vw;
}
text {
font-family: 'Cabin Sketch', cursive;
font-size: 96px;
fill: #991F1F;
text-anchor: middle;
user-select: none;
}
const select = s => document.querySelector(s);
const selectAll = s => document.querySelectorAll(s);
const heart = selectAll('#heart polygon');
const container = selectAll('#container polygon');
const blurFilter = select('#gBlur');
let together = false;
document.addEventListener('click', handleEvents);
document.addEventListener('touchstart', handleEvents);
TweenMax.set([heart, container], { transformOrigin: 'center' });
function randomBetween(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
function disperse() {
heart.forEach(poly => {
TweenMax.to(poly, 1, {
x: randomBetween(-3000, 3000),
y: randomBetween(-3000, 3000),
rotation: randomBetween(0, 360),
scale: randomBetween(15, 20) / 10,
ease: Power2.easeOut });
});
container.forEach(poly => {
TweenMax.to(poly, 1, {
x: randomBetween(-3000, 3000),
y: randomBetween(-3000, 3000),
rotation: randomBetween(0, 360),
scale: randomBetween(10, 15) / 10,
ease: Power2.easeOut });
});
Advertisement
