chore: update gsap version to 3.14.2 in pnpm-lock and pnpm-workspace; add new gsap animation examples and enhance documentation with additional links and demos

Author: hairyf

docs/.vitepress/config.ts

@@ -32,6 +32,7 @@ const themeConfig: DefaultTheme.Config = {
         { text: 'Events', link: '/examples/events/buttons' },
         { text: 'Filters', link: '/examples/filters/blur' },
         { text: 'Graphics', link: '/examples/graphics/basic_shapes' },
+        { text: 'Gsap', link: '/examples/gsap/animation_basic' },
         // { text: 'Text', link: '/examples/text/bitmap-text' },
         // { text: 'Events', link: '/examples/events/click' },
         // { text: 'Masks', link: '/examples/masks/filter' },
@@ -198,6 +199,20 @@ const themeConfig: DefaultTheme.Config = {
           { text: 'Texture Fill', link: '/examples/graphics/texture-fill' },
         ],
       },
+      {
+        text: 'Gsap',
+        collapsed: true,
+        items: [
+          { text: 'Animation / Basic', link: '/examples/gsap/animation_basic' },
+          { text: 'Animation / Confetti', link: '/examples/gsap/animation_confetti' },
+          { text: 'Animation / Keyframe', link: '/examples/gsap/animation_keyframe' },
+          { text: 'Animation / Physics / Particles', link: '/examples/gsap/animation_physics_particles' },
+          { text: 'Animation / Timeline', link: '/examples/gsap/animation_timeline' },
+          { text: 'Interaction / Inertia', link: '/examples/gsap/interaction_inertia' },
+          { text: 'Interaction / MoveTo', link: '/examples/gsap/interaction_moveto' },
+          { text: 'Physics', link: '/examples/gsap/physics' },
+        ],
+      },
       // {
       //   text: 'Container',
       //   collapsed: true,

docs/examples/graphics/demo/svg_file.vue

@@ -1,25 +1,11 @@
 <script lang="ts" setup>
-import type { Graphics as GraphicsElement } from 'pixi.js'
 import { ref } from 'vue'
 import { onTick, useScreen } from 'vue3-pixi'
 
 const screen = useScreen()
-const graphicsRef = ref<GraphicsElement>()
 const rotation = ref(0)
 const scale = ref(2)
 
-function onDraw(graphics: GraphicsElement) {
-  if (!graphicsRef.value) {
-    graphicsRef.value = graphics
-    // line it up as this svg is not centered
-    const bounds = graphics.getLocalBounds()
-    graphics.pivot.set(
-      (bounds.x + bounds.width) / 2,
-      (bounds.y + bounds.height) / 2,
-    )
-  }
-}
-
 onTick(() => {
   rotation.value += 0.01
   scale.value = 2 + Math.sin(rotation.value)
@@ -29,22 +15,24 @@ onTick(() => {
 <template>
   <assets
     :entry="{
-      alias: 'tiger',
       src: 'https://pixijs.com/assets/tiger.svg',
-      data: {
-        parseAsGraphicsContext: true,
-      },
+      data: { parseAsGraphicsContext: true },
     }"
-    @loaded="console.log"
   >
     <template #default="{ data }">
       <graphics
-        :texture="data"
+        :context="data"
         :x="screen.width / 2"
         :y="screen.height / 2"
         :rotation="rotation"
         :scale="scale"
-        @effect="onDraw"
+        @effect="graphics => {
+          const bounds = graphics.getLocalBounds()
+          graphics.pivot.set(
+            (bounds.x + bounds.width) / 2,
+            (bounds.y + bounds.height) / 2,
+          )
+        }"
       />
     </template>
   </assets>

docs/examples/graphics/texture-fill.md

@@ -1 +1 @@
-<demo mode="full" src="./demo/basic_shapes.vue" />
+<demo mode="full" src="./demo/texture-fill.vue" />

docs/examples/gsap/animation_basic.md

@@ -0,0 +1,2 @@
+<demo mode="full" :background-alpha="0"  src="./demo/animation_basic.vue" />
+

docs/examples/gsap/animation_confetti.md

@@ -0,0 +1,2 @@
+<demo mode="full" :background-alpha="0" src="./demo/animation_confetti.vue" />
+

docs/examples/gsap/animation_keyframe.md

@@ -0,0 +1,2 @@
+<demo mode="full" src="./demo/animation_keyframe.vue" />
+

docs/examples/gsap/animation_physics_particles.md

@@ -0,0 +1,2 @@
+<demo mode="full" src="./demo/animation_physics_particles.vue" />
+

docs/examples/gsap/animation_timeline.md

@@ -0,0 +1,2 @@
+<demo mode="full" src="./demo/animation_timeline.vue" />
+

docs/examples/gsap/demo/animation_basic.vue

@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import type { Container as ContainerElement } from 'pixi.js'
+import { whenever } from '@vueuse/core'
+import { gsap } from 'gsap'
+import { DropShadowFilter } from 'pixi-filters'
+import { Graphics, Text } from 'pixi.js'
+import { onUnmounted, ref } from 'vue'
+import { useScreen } from 'vue3-pixi'
+
+const screen = useScreen()
+
+const dropShadowFilter = new DropShadowFilter({
+  color: 'black',
+  alpha: 0.25,
+  blur: 4,
+  offset: { x: 0, y: 10 },
+})
+
+const words = ['PixiJS', '&', 'GSAP', '💚']
+const wrapper = ref<ContainerElement>()
+const wordContainers = ref<ContainerElement[]>()
+let animation: gsap.core.Tween | null = null
+
+function initial(wrapper: ContainerElement, wordContainers: ContainerElement[]) {
+  // Calculate spacing
+  let spacing = 0
+  wordContainers.forEach((container) => {
+    const text = container.children.find(child => child instanceof Text) as Text
+    if (text) {
+      container.pivot.set(text.width / 2, text.height / 2)
+      container.x = spacing + text.width / 2
+      spacing += container.width + 10
+    }
+  })
+
+  wrapper.pivot.x = spacing / 2
+
+  // Start animation
+  animation = gsap.from(wordContainers, {
+    y: -100,
+    alpha: 0,
+    angle: 'random(-80, 80)',
+    stagger: 0.1,
+    duration: 1,
+    ease: 'back',
+    yoyo: true,
+    repeat: -1,
+    repeatDelay: 1,
+  })
+}
+
+whenever(
+  () => wordContainers.value && wrapper.value,
+  () => initial(wrapper.value!, wordContainers.value!),
+  { immediate: true }
+)
+
+onUnmounted(() => animation?.kill())
+</script>
+
+<template>
+  <assets entry="https://pixijs.com/assets/webfont-loader/Grandstander-ExtraBold.ttf">
+    <container ref="wrapper" :x="screen.width / 2" :y="screen.height / 2">
+      <container
+        v-for="(word, i) in words"
+        :key="i" 
+        ref="wordContainers"
+        @effect="container => {
+          const padding = 20
+          // Create text
+          const text = new Text({
+            text: word,
+            style: {
+              fontFamily: 'Grandstander ExtraBold',
+              fontSize: 36,
+              fill: 0xFFFFFF,
+            },
+          })
+
+          // Create rounded rectangle
+          const box = new Graphics()
+            .roundRect(
+              -padding / 2,
+              -padding / 2,
+              text.width + padding,
+              text.height + padding,
+              8,
+            )
+            .fill({ color: 0xED427C })
+            .stroke({ color: 'white', width: 2 })
+
+          box.filters = [dropShadowFilter]
+
+          container.pivot.set(text.width / 2, text.height / 2)
+          // Add box and text to container
+          container.addChild(box, text)
+      }"
+      />
+    </container>
+  </assets>
+</template>

docs/examples/gsap/demo/animation_confetti.ts

@@ -0,0 +1,102 @@
+import { gsap } from 'gsap';
+import Physics2DPlugin from 'gsap/Physics2DPlugin';
+import { Application, Assets, Graphics, Text } from 'pixi.js';
+import { DropShadowFilter } from 'pixi-filters';
+
+gsap.registerPlugin(Physics2DPlugin);
+
+(async () => {
+  // Create a new application
+  const app = new Application();
+
+  // Initialize the application
+  await app.init({ background: '#1099bb', resizeTo: window, antialias: true });
+  await Assets.load(
+    'https://pixijs.com/assets/webfont-loader/Grandstander-ExtraBold.ttf',
+  );
+
+  // Append the application canvas to the document body
+  document.body.appendChild(app.canvas);
+
+  app.stage.eventMode = 'static'; // Set the stage to static event mode
+  app.stage.cursor = 'pointer'; // Change cursor to pointer on hover
+  app.stage.hitArea = app.screen; // Set the hit area to the entire screen
+
+  app.stage.addEventListener('click', (event) => {
+    // Generate a random number of dots
+    const dotCount = gsap.utils.random(15, 30, 1);
+    const colors = ['white'];
+
+    for (let i = 0; i < dotCount; i++) {
+      // Create a dot element
+      const dot = new Graphics()
+        .circle(0, 0, gsap.utils.random(20, 40))
+        .fill('white') // Pick a random color
+        .stroke({ color: 'white', width: 2 }); // Add a white stroke
+
+      dot.filters = [
+        new DropShadowFilter({
+          color: 'black',
+          alpha: 0.5,
+          blur: 4,
+          offset: { x: 0, y: 5 },
+        }),
+      ];
+
+      app.stage.addChild(dot);
+
+      // Set initial position and styles of the dot
+      gsap.set(dot, {
+        tint: gsap.utils.random(colors), // Pick a random color
+        y: event.clientY, // position dot at coordinates of the click
+        x: event.clientX,
+        scale: 0, // Start at scale 0
+      });
+
+      // Animate the dot with physics2D
+      gsap
+        .timeline({
+          onComplete: () => dot.destroy(), // Clean up the dot after animation
+        })
+        .to(dot, {
+          scale: gsap.utils.random(0.3, 1), // Random scale for the pop-in effect
+          duration: 0.02, // Quick pop-in effect
+          ease: 'power3.out',
+        })
+        .to(dot, {
+          duration: 2,
+          physics2D: {
+            velocity: gsap.utils.random(500, 1000), // Random velocity
+            angle: gsap.utils.random(0, 360), // Random direction
+            gravity: 1500, // Gravity effect
+          },
+          ease: 'none',
+        }); // Start together with the previous tween
+    }
+  });
+
+  // add some text to the stage
+  const text = new Text({
+    text: 'Click to create confetti',
+    style: {
+      fontFamily: 'Grandstander ExtraBold',
+      fontSize: 50,
+      fill: 'white',
+      align: 'center',
+    },
+    anchor: 0.5,
+    x: app.screen.width / 2,
+    y: app.screen.height / 2 - 50,
+  });
+
+  text.filters = [
+    new DropShadowFilter({
+      color: 'black',
+      alpha: 0.5,
+      blur: 4,
+      offset: { x: 0, y: 5 },
+    }),
+  ];
+
+  app.stage.addChild(text);
+})();