I am currently working on a project that involves animating a bee svg icon as the user scrolls through the website. The bee starts at the top and fills in a grey color line with pink as the user moves forward, and moves backward as the user scrolls back. You can view the image reference here.
So far, here is the code I have implemented:
index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div
style="height: 100vh; background-color: blue; padding: 0; margin: 0; display: flex; justify-content: center; align-items: center; color: yellow; font-size: x-large;">
Main View
</div>
<div style="position: relative;">
<div style="position:absolute; top:0; right:0; width:100%; height:auto; background:url('background-map.jpg') no-repeat;"
id="route">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 2000" id="svgRoute">
<!-- Include path data here -->
</svg>
</div>
</div>
<!-- Include jQuery from CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Your custom JavaScript file -->
<script src="./index.js"></script>
</body>
</html>
index.css
#route {
/* CSS styles */
}
/* Additional CSS styles for your elements */
index.js
$(document).ready(function () {
/* JavaScript functions for animation */
});
Issues I'm encountering:
1- I want to animate the bee only when it's within the view of the user, not before. 2- The bee icon moves backward instead of forward, possibly due to CSS transformations. 3- I have my own bee icon SVG that I want to use instead of the car icon mentioned in the code.
Here is the code for the bee icon (bee.svg):
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="46.302" height="47.062" viewBox="0 0 46.302 47.062">
<!-- Insert SVG code here -->
</svg>
4- I aim to center align the bee path and make it responsive. 5- When using my SVG instead of the provided car icon, the angle calculations become irregular during the journey.
You can view the example site I'm trying to replicate here.