gsap-series/4-rotatingElement.html at main · wondher/gsap-series · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Rotating Element Animation Example</title>
		<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
		<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
		/>
	</head>
	<body>
		<div
			class="flex flex-col justify-center items-center w-screen h-screen antialiased"
		>
			<svg
				xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 24 24"
				class="w-20 h-20"
				id="rotatingElement"
			>
				<circle cx="12" cy="12" r="10" fill="url(#gradient)" />
				<defs>
					<linearGradient
						id="gradient"
						x1="0%"
						y1="0%"
						x2="100%"
						y2="0%"
					>
						<stop offset="0%" style="stop-color: purple" />
						<stop offset="100%" style="stop-color: pink" />
					</linearGradient>
				</defs>
			</svg>
		</div>
		<script>
			const rotatingElement = document.getElementById("rotatingElement");
			const tl = gsap.timeline({ paused: true });

			tl.to(rotatingElement, {
				duration: 2,
				rotation: 360,
				transformOrigin: "center",
				repeat: -1,
			});

			tl.play();
		</script>
	</body>
</html>