From 7ef830fdd2a8c08cd8a6e39b9432f2958537fc5e Mon Sep 17 00:00:00 2001
From: Maxim <maxim.mordasov@grafana.com>
Date: Thu, 3 Nov 2022 16:19:43 +0000
Subject: [PATCH] add nice pointer  animation

---
 .../src/containers/Rotation/Rotation.module.css        | 10 +++++++++-
 .../src/containers/Rotation/RotationTutorial.tsx       |  4 ++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/grafana-plugin/src/containers/Rotation/Rotation.module.css b/grafana-plugin/src/containers/Rotation/Rotation.module.css
index 20be10ea..5d462ddf 100644
--- a/grafana-plugin/src/containers/Rotation/Rotation.module.css
+++ b/grafana-plugin/src/containers/Rotation/Rotation.module.css
@@ -79,7 +79,15 @@
 .pointer {
   position: absolute;
   top: -9px;
-  transition: left 500ms ease;
+  transition: left 500ms ease, opacity 500ms ease, transform 500ms ease;
+  transform-origin: bottom center;
+  opacity: 0;
+  transform: scale(0);
+}
+
+.pointer--active {
+  transform: scale(1);
+  opacity: 1;
 }
 
 .tutorial-slot {
diff --git a/grafana-plugin/src/containers/Rotation/RotationTutorial.tsx b/grafana-plugin/src/containers/Rotation/RotationTutorial.tsx
index c153ce2a..3c1c0475 100644
--- a/grafana-plugin/src/containers/Rotation/RotationTutorial.tsx
+++ b/grafana-plugin/src/containers/Rotation/RotationTutorial.tsx
@@ -57,8 +57,8 @@ const RotationTutorial: FC<RotationProps> = (props) => {
   return (
     <div className={cx('slots', 'slots--tutorial')} style={{ transform: `translate(${x * 100}%, 0)` }}>
       <Pointer
-        className={cx('pointer')}
-        style={{ left: `calc(${pointerX * 100}% - 5px)`, visibility: pointerX === undefined ? 'hidden' : 'visible' }}
+        className={cx('pointer', { 'pointer--active': pointerX !== undefined })}
+        style={{ left: `calc(${pointerX * 100}% - 5px)` }}
       />
       {events.map((event, index) => {
         const duration = event.end.diff(event.start, 'seconds');