Track truck/Ball on track/Road animation with scroll trigger(GSAP Animation)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Truck on Curvy Road</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.container {
position: relative;
width: 100%;
height: 4320px; /* Height based on your path's size */
overflow: hidden;
}
.road {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4320px; /* Match the height of the container */
}
.truck {
position: absolute;
width: 60px;
height: 60px;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.blocks {
height: 100vh;
width: 100%;
background: pink;
display: block;
border: 1px solid black;
}
.circle {
display: block;
width: 100px;
height: 100px;
background: #FFE9F2;
border-radius: 50%;
background: -webkit-radial-gradient(15px 10px, circle, #FFE9F2, #ffc0cb);
background: -moz-radial-gradient(25px 25px, circle, red, #000);
background: radial-gradient(25px 25px, circle, red, #000);
-webkit-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
-moz-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
-ms-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
-webkit-transition: all 1s ease;
transition: all 1s ease;
position: absolute;
left: 0;
}
/* Spinning the sphere using key frames */
@-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="blocks"></div>
<div class="container">
<!-- SVG Path for the road -->
<svg class="road" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 4320">
<defs>
<style>
.st0, .st1 {
fill: none;
stroke: #FFE9F2;
stroke-miterlimit: 10;
}
.st1 {
stroke-width: 5px;
}
</style>
</defs>
<path class="st1" id="road-path" d="M2000.7,4860l-1690.4-887.7c-179.2-94.1-179.2-290.6,0-384.7l1324.1-695.3c179.2-94.1,179.2-290.6,0-384.7L310.3,1812.3c-179.2-94.1-179.2-290.6,0-384.7l1189.9-624.8c210.8-110.7,165.5-350.8-78.2-414.7L-56,0"/>
</svg>
<!-- Truck image -->
<div class="truck">
<div class="circle"></div></div>
</div>
<div class="blocks">
</div>
<!-- GSAP and ScrollTrigger Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/MotionPathPlugin.min.js"></script>
<script>
// Register GSAP plugins
gsap.registerPlugin(MotionPathPlugin, ScrollTrigger);
// Create a GSAP timeline for the truck animation
const truckTimeline = gsap.timeline({
scrollTrigger: {
trigger: ".container", // Element that triggers the animation
start: "top 90%", // Start when the container is centered in the viewport
end: "bottom top", // End when the container reaches the top of the viewport
scrub: true, // Make the animation scrubbed (follow scroll position)
markers: true, // Show markers for debugging (remove in production)
}
});
truckTimeline.to(".truck", {
motionPath: {
path: "#road-path",
align: "#road-path",
alignOrigin: [0.5, 0.5], // Center the truck on the path
start: 1, // Start at the end of the path
end: 0, // End at the start of the path
autoRotate: true, // Rotate the truck to follow the path
pin:true,
},
ease: "linear", // No easing to keep the truck moving smoothly
});
</script>
</body>
</html>
No comments:
Post a Comment