Merge pull request #621 from vltansky/feat/rotate-with-css

Logo rotate animation with css
cocopon · Nov 3, 2024 · aa34f26 · aa34f26
2 parents 5c88c1e + 79b4f15
commit aa34f26
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/packages/tweakpane/src/doc/sass/components/_logo.scss b/packages/tweakpane/src/doc/sass/components/_logo.scss
@@ -1,3 +1,12 @@
+@keyframes rotateAnimation {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
 .logo {
 	$logo-color: var(--fg-color);
 	$logo-hover-color: var(--fg-color-action);
@@ -29,7 +38,8 @@
 		border-radius: 4px;
 		display: block;
 		height: 12px;
-		transition: transform 0.05s ease-out;
+		animation: rotateAnimation auto linear;
+		animation-timeline: scroll(root);
 		width: 12px;
 	}
 	&:hover &_symbol {

diff --git a/packages/tweakpane/src/doc/ts/bundle.ts b/packages/tweakpane/src/doc/ts/bundle.ts
@@ -80,8 +80,10 @@ function setUpVersionSwitcher() {
 	}, initIndex);
 	router.route(location.pathname);
 
-	setUpScrews();
 	setUpSpMenu();
+	if (!CSS.supports('animation-timeline', 'scroll()')) {
+		setUpScrews();
+	}
 	setUpVersionSwitcher();
 
 	hljs.highlightAll();