Разлетающиеся объекты

<div id="objects_gravity"></div>

<script src='https://matilda-design.ru/library/matter.min.js'></script>
<script src="https://matilda-design.ru/library/GSAP.js"></script>
<script src="https://matilda-design.ru/library/ScrollTrigger.js"></script>
<script>
var canvas = document.getElementById('objects_gravity');
var Engine = Matter.Engine,
Render = Matter.Render,
Events = Matter.Events,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
var engine = Engine.create(),
world = engine.world;
engine.world.gravity.y = 1;
engine.world.gravity.x = 0;
var width = window.innerWidth;
var height = window.innerHeight;
var render = Render.create({
element: canvas,
engine: engine,
options: {
width: width,
height: height,
pixelRatio: 2,
background: 'transparent',
wireframes: false,
}
});
var ground = Bodies.rectangle(width / 2, height + 100, width + 400, 200, {
isStatic: true,
mass: 10000,
inertia: Infinity
});
var wallLeft = Bodies.rectangle(-100, height / 2, 200, height * 2, {
isStatic: true,
mass: 10000,
inertia: Infinity
});
var wallRight = Bodies.rectangle(width + 100, height / 2, 200, height * 2, {
isStatic: true,
mass: 10000,
inertia: Infinity
});
var roof = Bodies.rectangle(width / 2, -100, width + 400, 200, {
isStatic: true,
mass: 10000,
inertia: Infinity
});
var radius = 20;
var isMobile = window.innerWidth <= 479; // Указываем разрешение
// Указываем размеры, левая колонка для мобилы, правая для пк (при добавлении новых не забываем про запятую)
var sizes = {
matilda: isMobile ? [240, 110] : [165, 76],
scrum: isMobile ? [83, 37] : [83, 37],
usability: isMobile ? [103, 37] : [103, 37],
feedback: isMobile ? [110, 37] : [110, 37]
};
function createSpriteBody(x, y, w, h, texture, originalW, originalH, radius = 20) {
return Bodies.rectangle(x, y, w, h, {
chamfer: { radius },
render: {
sprite: {
texture,
xScale: w / originalW,
yScale: h / originalH
}
}
});
}
// Создаем объекты (перечисляем названия переменных в 3 местах) размеры указываем изначальные
var matilda = createSpriteBody(width * 0.5, height * 0.3, sizes.matilda[0], sizes.matilda[1],
'https://static.tildacdn.com/tild3830-3437-4538-b762-653738393335/Matilda.png', 165, 76);
var scrum = createSpriteBody(width * 0.3, height * 0.4, sizes.scrum[0], sizes.scrum[1],
'https://static.tildacdn.com/tild6665-3030-4365-b834-626661393933/scrum.svg', 83, 37);
var usability = createSpriteBody(width * 0.7, height * 0.35, sizes.usability[0], sizes.usability[1],
'https://static.tildacdn.com/tild6262-6132-4430-a135-383065633635/usability.svg', 103, 37);
var feedback = createSpriteBody(width * 0.5, height * 0.45, sizes.feedback[0], sizes.feedback[1],
'https://static.tildacdn.com/tild3635-6539-4837-b062-366230373863/feedback.svg', 110, 37);
// Добавляем на холст (перечисляем названия переменных)
World.add(engine.world, [
ground, wallLeft, wallRight, roof,
matilda, scrum, usability, feedback
]);
gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.create({
trigger: ".trigger-gravity",
markers: false,
start: "top center",
end: "bottom center",
onEnter: () => myfunction_1(),
onEnterBack: () => myfunction_1(),
onLeave: () => myfunction_2(),
onLeaveBack: () => myfunction_2(),
});
function myfunction_1() {
engine.world.gravity.y = 1;
engine.world.gravity.x = 0;
}
function myfunction_2() {
engine.world.gravity.y = -1;
engine.world.gravity.x = 0;
}
var mouse = Mouse.create(render.canvas);
var mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: { visible: false }
}
});
World.add(world, mouseConstraint);
render.mouse = mouse;
mouse.element.removeEventListener("mousewheel", mouse.mousewheel);
mouse.element.removeEventListener("DOMMouseScroll", mouse.mousewheel);
let click = false;
document.addEventListener('mousedown', () => click = true);
document.addEventListener('mousemove', () => click = false);
document.addEventListener('mouseup', () => console.log(click ? 'click' : 'drag'));
Events.on(mouseConstraint, 'mouseup', function(event) {
var mouseConstraint = event.source;
var bodies = engine.world.bodies;
if (!mouseConstraint.bodyB) {
for (let i = 0; i < bodies.length; i++) {
var body = bodies[i];
if (click === true) {
if (Matter.Bounds.contains(body.bounds, mouseConstraint.mouse.position)) {
var bodyUrl = body.url;
if (bodyUrl != undefined) {
window.open(bodyUrl, '_blank');
}
break;
}
}
}
}
});
Engine.run(engine);
Render.run(render);
window.addEventListener('resize', () => {
location.reload();
});
</script>