Jump to content
Search Community

Jason Sturges

Members
  • Posts

    5
  • Joined

  • Last visited

Profile Information

  • Location
    Des Moines, Iowa

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Jason Sturges's Achievements

  1. So, the actual use case here is I have a few hundred components in Storybook, and when changing stories the page is swept away leaving GSAP to error infinitely in the console. As these tweens are running inside components, and not specifically part of visual stories, I was hoping to have a story change callback handler that could simply kill / clear all tweens. Essentially (meta): onStoryChange { killAll() } Otherwise I can walk the display list and cleanup better, as each individual component can start / stop its own tween references.
  2. Prior to GSAP3 I recall a `killAll()` function that supported Pixi.js display objects. Instead, when I call `gsap.killTweensOf("*")` using the wildcard glob it does not kill the tween. CodeSanbox example: https://codesandbox.io/s/gsap-kill-tweens-of-ww9fsb?file=/src/index.js Example code: import PixiPlugin from "gsap/PixiPlugin"; import { gsap, Power4 } from "gsap"; gsap.registerPlugin(PixiPlugin); PixiPlugin.registerPIXI(PIXI); const tween = gsap.timeline({ repeat: -1 }); tween .to(circle, { duration: 0.35, pixi: { tint: 0xffff00 }, ease: Power4.easeOut, callbackScope: this }) .to(circle, { duration: 0.65, pixi: { tint: 0x123456 }, ease: Power4.easeOut, callbackScope: this }); setTimeout(() => { console.log("Killing all tweens"); gsap.killTweensOf("*"); }, 5000); Tracing the GSAP code, it finds my timeline but the wildcard is not adding the tweens for disposal. Presume this is either a bug, or I'm not using `killTweensOf` correctly in the Pixi.js space.
  3. @GreenSock Excellent! Thank you, that was it!
  4. Not sure I follow how to shift between colors with GSAP 3.0 using RGB values in Pixi.js Whether I use tintor my color property to change color, it tweens the RGB hex value as a single integer, creating a wobbly flashing transition of colors. Code: import * as PIXI from "pixi.js"; import { Power4, TimelineMax } from "gsap"; import PixiPlugin from "gsap/PixiPlugin"; PixiPlugin.registerPIXI(PIXI); // ... this._tween = new TimelineMax({ repeat: -1 }) .to(this, 1, { color: 0xffff00, ease: Power4.easeIn }); Seems like GSAP 3.0 relies on auto-detection of color properties instead of previous plugins, like color transform or color props plugins. Is there a trick, or some way I can pass a custom function as frame handler to the tween function?
×
×
  • Create New...