Click here to Skip to main content
15,868,141 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Animation flow is as follows: There are mainly 4 steps.
Movement 1 LINE like the one below moves from left to right (When loading)
Movement 2 LINE spreads to fill the screen
Movement 3 A number of wavy lines appear in a wavy movement, creating the shape of the MV wave.

Basically, it is a work of interface animations.
It includes basic 4 steps.
1 line move from a specific direction which is in your case left to right.
2nd movement is that line spreads to fill the screen
3rd movement includes multiple waves appear on the screen and after some time it disappears based on the number of waves.


File:- https://i.stack.imgur.com/ggmye.jpg

What I have tried:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device, initial-scale=1.0">
	<title>Wave</title>
	<style>
		body{
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}
		h1{
			font-family: sans-serif;
			position: absolute;
			text-align: center;
			width: 100%;
		}
	</style>
</head>
<body>
	<h1>Sin Wave</h1>
	<canvas id="wave"></canvas>

<script>
	const canvas = document.querySelector('#wave');
	const c = canvas.getContext('2d');
	canvas.width = innerWidth;
	canvas.height = innerHeight;

	const frequency = 0.01;
	let increment = frequency;

	function animation() {
		requestAnimationFrame(animation);
		c.clearRect(0, 0, canvas.width, canvas.height);

		c.fillStyle = "#fff";
		c.fillRect(0, 0, canvas.width, canvas.height);
		c.beginPath();
		c.moveTo(0, canvas.height/2);

		for(let i = 0; i< canvas.width; i++){
			c.lineTo(i, canvas.height/2 + Math.sin(i * 0.01 + increment) * 50 * Math.sin(increment));
		}
	

	c.strokeStyle = "#000";
	c.stroke();

	c.closePath();
	increment += frequency;
	}
	animation();
</script>

</body>
</html>


I create this wave line but I don't know how I start wave after half-line.
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900