Skip to content
This repository has been archived by the owner on Nov 5, 2023. It is now read-only.

Commit

Permalink
Migrate to free GSAP (#33)
Browse files Browse the repository at this point in the history
* Install free GSAP

* Remove paid GSAP tests

* Remove paid GSAP plugins usage

* Replace GSAP MorphSVG with flubber

* Optimize interpolators

* Simple transition without morph

* Update dependencies

* Update version
  • Loading branch information
d0rich authored Jul 26, 2023
1 parent c6f7ef3 commit 892acb9
Show file tree
Hide file tree
Showing 10 changed files with 3,984 additions and 3,760 deletions.
6 changes: 0 additions & 6 deletions .github/workflows/deploy.yml
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,6 @@ on:
# schedule:
# - cron: "0 3 * * *"

env:
GSAP_TOKEN: ${{secrets.GSAP_TOKEN}}

jobs:
build-and-deploy:
runs-on: ubuntu-latest
Expand All @@ -28,9 +25,6 @@ jobs:
- name: Prepare Nuxt
run: npx nuxi prepare

- name: Test
run: npm run test

- name: Build Nuxt 3 static site
run: npm run generate

Expand Down
2 changes: 0 additions & 2 deletions .npmrc

This file was deleted.

60 changes: 15 additions & 45 deletions components/d/character/Index.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
<script lang="ts">
import gsap from 'gsap'
import idle from '../../../assets/img/character/idle.webp'
import idleColor from '../../../assets/img/character/idle-color.webp'
import idleOutline from '../../../assets/img/character/idle-outline.webp'
Expand All @@ -13,6 +11,7 @@ import profi from '../../../assets/img/character/profi.webp'
import profiColor from '../../../assets/img/character/profi-color.webp'
import profiOutline from '../../../assets/img/character/profi-outline.webp'
import profiOutlineColor from '../../../assets/img/character/profi-outline-color.webp'
import type { CSSProperties } from 'vue'
export type CharacterPose = 'idle' | 'action' | 'profi'
Expand Down Expand Up @@ -58,44 +57,19 @@ function getAsset(pose: CharacterPose) {
]
}
let initialSvgPath: ReturnType<typeof resolveComponent>
const useHref = ref(`#${props.pose}-shape`)
switch (props.pose) {
case 'idle':
initialSvgPath = resolveComponent('DCharacterShapeIdle')
break
case 'profi':
initialSvgPath = resolveComponent('DCharacterShapeProfi')
break
case 'action':
initialSvgPath = resolveComponent('DCharacterShapeAction')
break
}
const shapeToAnimate = ref<ComponentPublicInstance | null>(null)
const shapeIdle = ref<ComponentPublicInstance | null>(null)
const shapeAction = ref<ComponentPublicInstance | null>(null)
const shapeProfi = ref<ComponentPublicInstance | null>(null)
const useStyle = reactive<CSSProperties>({})
watch(
() => props.pose,
(newPose, oldPose) => {
async (newPose, oldPose) => {
if (props.noShape) return
const poseShapeMap: Record<CharacterPose, SVGPathElement> = {
idle: shapeIdle.value?.$el,
action: shapeAction.value?.$el,
profi: shapeProfi.value?.$el
}
if (isMorphSVGPluginInstalled()) {
gsap.fromTo(
shapeToAnimate.value?.$el,
{ morphSVG: poseShapeMap[oldPose] },
{ morphSVG: poseShapeMap[newPose], duration: 0.2 }
)
} else {
useHref.value = `#${newPose}-shape`
}
useStyle.transform = 'scale(0.5)'
useStyle.filter = 'blur(10px)'
await new Promise(resolve => setTimeout(resolve, 150))
useHref.value = `#${newPose}-shape`
useStyle.transform = undefined
useStyle.filter = undefined
}
)
</script>
Expand All @@ -105,21 +79,17 @@ watch(
<div class="relative isolate w-full h-full">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<defs v-if="!noShape">
<DCharacterShapeIdle id="idle-shape" ref="shapeIdle" />
<DCharacterShapeAction id="action-shape" ref="shapeAction" />
<DCharacterShapeProfi id="profi-shape" ref="shapeProfi" />
<DCharacterShapeIdle id="idle-shape" />
<DCharacterShapeAction id="action-shape" />
<DCharacterShapeProfi id="profi-shape" />
</defs>
<g v-if="!noShape">
<component
:is="initialSvgPath"
v-show="isMorphSVGPluginInstalled()"
ref="shapeToAnimate"
:class="shapeClass"
/>
<use
v-show="!isMorphSVGPluginInstalled()"
class="transition-all"
:style="useStyle"
:class="shapeClass"
:href="useHref"
transform-origin="512 512"
/>
</g>
</svg>
Expand Down
10 changes: 10 additions & 0 deletions composables/calculations.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
const cache = new Map<string, any>()

export function useCache<T>(key: string, fn: () => T): T {
if (cache.has(key)) {
return cache.get(key)
}
const value = fn()
cache.set(key, value)
return value
}
Loading

0 comments on commit 892acb9

Please sign in to comment.