Refactor Animation Timeline (#7564)

* Add anime4 again

* Add npm token

* Fix registry

* Fix echo

* Update GHA for deploy

* Refactor scrubber

* Further iterations

* Disable holding down keys logic

* Couple of final tweaks

* Fix bugs

* Improve further

* Fix bugs

* Fix tests

Author: iHiD

.github/workflows/deploy.yml

@@ -52,6 +52,9 @@ jobs:
       - name: Checkout
         uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab
 
+      - name: Authenticate with private NPM package
+        run: echo -e "//npm.pkg.github.com/:_authToken=${{ secrets.NPM_TOKEN }}\n@juliangarnierorg:registry=https://npm.pkg.github.com" > ~/.npmrc
+
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@e1e17a757e536f70e52b5a12b2e8d1d1c60e04ef
         with:

.github/workflows/tests.yml

@@ -16,6 +16,9 @@ jobs:
             .dockerimages.json
           sparse-checkout-cone-mode: false
 
+      - name: Authenticate with private NPM package
+        run: echo -e "//npm.pkg.github.com/:_authToken=${{ secrets.NPM_TOKEN }}\n@juliangarnierorg:registry=https://npm.pkg.github.com" > ~/.npmrc
+
       - name: Define Docker images
         run: |
           echo "localstack_image=$(jq -r '.localstack' .dockerimages.json)" >> "$GITHUB_ENV"
@@ -36,6 +39,9 @@ jobs:
     steps:
       - uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab
 
+      - name: Authenticate with private NPM package
+        run: echo -e "//npm.pkg.github.com/:_authToken=${{ secrets.NPM_TOKEN }}\n@juliangarnierorg:registry=https://npm.pkg.github.com" > ~/.npmrc
+
       - name: Set up Ruby
         uses: ruby/setup-ruby@6bd3d993c602f6b675728ebaecb2b569ff86e99b
         with:
@@ -73,6 +79,9 @@ jobs:
       - uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab
       ###
 
+      - name: Authenticate with private NPM package
+        run: echo -e "//npm.pkg.github.com/:_authToken=${{ secrets.NPM_TOKEN }}\n@juliangarnierorg:registry=https://npm.pkg.github.com" > ~/.npmrc
+
       # Caching using GitHub's caching action
       # https://github.com/actions/cache/blob/main/examples.md#node---yarn
       - name: Get yarn cache directory path
@@ -169,6 +178,9 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab
 
+      - name: Authenticate with private NPM package
+        run: echo -e "//npm.pkg.github.com/:_authToken=${{ secrets.NPM_TOKEN }}\n@juliangarnierorg:registry=https://npm.pkg.github.com" > ~/.npmrc
+
       - name: Set up Ruby
         uses: ruby/setup-ruby@6bd3d993c602f6b675728ebaecb2b569ff86e99b
         with:
@@ -325,6 +337,9 @@ jobs:
       # Checkout using GitHub's checkout action
       - uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab
 
+      - name: Authenticate with private NPM package
+        run: echo -e "//npm.pkg.github.com/:_authToken=${{ secrets.NPM_TOKEN }}\n@juliangarnierorg:registry=https://npm.pkg.github.com" > ~/.npmrc
+
       ###
       # Setup Ruby - this needs to match the version in the Gemfile
       - name: Set up Ruby
@@ -420,6 +435,9 @@ jobs:
       # Checkout using GitHub's checkout action
       - uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab
 
+      - name: Authenticate with private NPM package
+        run: echo -e "//npm.pkg.github.com/:_authToken=${{ secrets.NPM_TOKEN }}\n@juliangarnierorg:registry=https://npm.pkg.github.com" > ~/.npmrc
+
       ###
       # Setup Ruby - this needs to match the version in the Gemfile
       - name: Set up Ruby

.gitignore

@@ -51,3 +51,5 @@ dump.rdb
 
 # Ignore vendored local databases
 /vendor/*mmdb
+
+.npmrc

app/javascript/components/bootcamp/SolveExercisePage/AnimationTimeline/AnimationTimeline.ts

@@ -1,30 +1,51 @@
 import { type Frame } from '@/interpreter/frames'
-import anime, { type AnimeInstance, type AnimeTimelineInstance } from 'animejs'
+import { createTimeline, stagger } from '@juliangarnierorg/anime-beta'
+import type {
+  DefaultsParams,
+  Timeline,
+  AnimationParams,
+  TargetSelector,
+  TargetsParam,
+} from '@juliangarnierorg/anime-beta'
 import type { AnimeCSSProperties } from './types'
 
-export type Animation = anime.AnimeAnimParams & {
+export type Animation = AnimationParams & {
+  targets: TargetsParam
   offset: string | number | undefined
   transformations: AnimeCSSProperties
 }
 
 export class AnimationTimeline {
-  private animationTimeline: AnimeTimelineInstance
+  private animationTimeline: Timeline
   private currentIndex: number = 0
   public currentFrame?: Frame
   public previousFrame?: Frame | null
   public nextFrame?: Frame | null
   public progress: number = 0
-  private updateCallbacks: ((anim: AnimeInstance) => void)[] = []
-
-  constructor(initialOptions: anime.AnimeParams, private frames: Frame[] = []) {
-    this.animationTimeline = anime.timeline({
-      easing: 'linear',
+  private updateCallbacks: ((anim: Timeline) => void)[] = []
+  private playCallbacks: ((anim: Timeline) => void)[] = []
+  private stopCallbacks: ((anim: Timeline) => void)[] = []
+
+  constructor(initialOptions: DefaultsParams, private frames: Frame[] = []) {
+    this.animationTimeline = createTimeline({
+      defaults: {
+        ease: 'linear',
+        ...initialOptions,
+      },
       autoplay: false,
-      ...initialOptions,
-      update: (anim: AnimeInstance) => {
+      onUpdate: (anim: Timeline) => {
         this.updateScrubber(anim)
         this.updateCallbacks.forEach((cb) => cb(anim))
       },
+      onBegin: (anim: Timeline) => {
+        this.playCallbacks.forEach((cb) => cb(anim))
+      },
+      onComplete: (anim: Timeline) => {
+        this.stopCallbacks.forEach((cb) => cb(anim))
+      },
+      onPause: (anim: Timeline) => {
+        this.stopCallbacks.forEach((cb) => cb(anim))
+      },
     })
   }
 
@@ -34,24 +55,32 @@ export class AnimationTimeline {
     this.animationTimeline = null
   }
 
-  public onUpdate(callback: (anim: AnimeInstance) => void) {
+  public onUpdate(callback: (anim: Timeline) => void) {
     this.updateCallbacks.push(callback)
 
     if (this.animationTimeline) {
       callback(this.animationTimeline)
       setTimeout(() => this.updateScrubber(this.animationTimeline), 1)
     }
   }
+  public onPlay(callback: (anim: Timeline) => void) {
+    this.playCallbacks.push(callback)
+  }
+  public onStop(callback: (anim: Timeline) => void) {
+    this.stopCallbacks.push(callback)
+  }
 
-  public removeUpdateCallback(callback: (anim: AnimeInstance) => void) {
+  public removeUpdateCallback(callback: (anim: Timeline) => void) {
     this.updateCallbacks = this.updateCallbacks.filter((cb) => cb !== callback)
   }
 
   public populateTimeline(animations: Animation[]) {
     animations.forEach((animation: Animation) => {
+      const { targets, offset, transformations, ...rest } = animation
       this.animationTimeline.add(
-        { ...animation, ...animation.transformations },
-        animation.offset
+        targets,
+        { ...rest, ...transformations },
+        offset
       )
     })
 
@@ -87,7 +116,7 @@ export class AnimationTimeline {
     return this.animationTimeline.duration
   }
 
-  private updateScrubber(anim: AnimeInstance) {
+  private updateScrubber(anim: Timeline) {
     if (!anim) return
     this.progress = anim.currentTime
 

app/javascript/components/bootcamp/SolveExercisePage/AnimationTimeline/types.ts

@@ -29,4 +29,5 @@ export type AnimeCSSProperties = {
   left?: string | number
   perspective?: string | number
   boxShadow?: string
+  filter?: string
 }

app/javascript/components/bootcamp/SolveExercisePage/Scrubber/InformationWidgetToggleButton.tsx

@@ -21,6 +21,10 @@ export function InformationWidgetToggleButton({
   const handleToggleShouldShowInformationWidget = useCallback(() => {
     toggleShouldShowInformationWidget()
 
+    // If we've not yet set the line (e.g. if we're playing the
+    // initial animation), don't scroll to the line.
+    if (highlightedLine == 0) return
+
     // if previous toggle state is `off` - which means we are about to turn it `on`...
     // scroll to the highlighted line
     if (!shouldShowInformationWidget) {

app/javascript/components/bootcamp/SolveExercisePage/Scrubber/Scrubber.tsx

@@ -22,12 +22,11 @@ function Scrubber({
   const { isSpotlightActive } = useContext(SolveExercisePageContext)
 
   const {
-    value,
+    timelineValue,
     handleChange,
     handleOnMouseUp,
     handleOnKeyUp,
     handleOnKeyDown,
-    handleMouseDown,
     updateInputBackground,
     rangeRef,
     handleGoToNextFrame,
@@ -78,10 +77,7 @@ function Scrubber({
         ref={rangeRef}
         max={calculateMaxInputValue(animationTimeline, frames)}
         onInput={updateInputBackground}
-        value={value}
-        onMouseDown={(event) =>
-          handleMouseDown(event, animationTimeline, frames)
-        }
+        value={timelineValue}
         onChange={(event) => {
           handleChange(event, animationTimeline, frames)
           updateInputBackground()