jSwtch

This is working for me : <script> import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { onMount } from "svelte"; const init = () => { //gsap... }; onMount(() => { gsap.registerPlugin(ScrollTrigger); init(); }); </script>

this is likely good enough thanks! (https://pixijs.download/v5.0.0-alpha.2/docs/PIXI.Graphics.html) tint number The tint applied to the graphic shape. This is a hex value. Apply a value of 0xFFFFFF to reset the tint. Default Value: 0xFFFFFF

I had started a similar thread here (https://www.html5gamedevs.com/topic/45085-gsap-v3-pixijs-v5-pixiplugin-w-graphics-issue/) for a different reason. I was wondering if someone here could comment on this question though. @OSUblake

I am also having an issue with the fill color changing with pixi graphics and pixiplugin as seen here: https://codepen.io/jswtch/pen/LYVoaxJ Seems like the rectangle is working but not the circle? EDIT:

Hello! I am having an isssue correctly understanding how the gsap stagger will work with respect to pixiplugin. As soon as I attempt to set the fill or line color of a graphics element I get an error, and the transition is to black. I understand the timeline is running on an array - but I have tried running on individual elements - and I get the same result. I am hoping someone can help me understand the best approach to connect everything here. Thanks

@OSUblake that depthy looks great! Here was the plan for the photomotion, although I think it can be used to generate a number of interesting "sweeping" effects. - I got way over my head (started learning pixi five days ago) so I might revisit it in a few months. Take a photo with clear foreground, mid, and background. Create unique focus alpha channel maps of each (see attached) Render as svg Use svg morph to link into a smooth animation Use this animated morphing depth as a mask for filter effects in pixi Apply the animated filter masks back on top of the original photo. I got as far as making the svg. However I think I might just animate the images in afterffects export as frames then use texturepacker to create a sprite sheet, and pixi for the animation & filter. I have attached compressed images of foreground, midground, and background to help visualize.

I am trying to overlap animation with relative positioning. I may just be doing this wrong - or is it not possible to tween an elements properties in parallel? ( I want to use different eases and timings)... almost like a 'while', or TweenMax.'as' I have seen this thread here from 2015... has anything like this been implemented? https://greensock.com/forums/topic/12573-additive-animation/ Are there any latest best practices to adding this to my pen?

Great thanks! I didn't know if the answer would change as I was adding more libraries. This is probably the most helpful forum I have ever seen.

Is it better to include js dependencies from a cdn or bundle with the app? I am using vue.js framework for pwa and nuxtjs for a static app. TweenMax.min.js pixi.min.js PixiPlugin.min.js

Hello, I am interested in creating photomotion style parallax movement (https://videohive.net/item/volumax-3d-photo-animator/13646883?s_rank=2) I understand how to use image editing to isolate background mid and foreground, I am just not sure how to tie is all together with gsap? Also about the distortion, should I create multiple instances of each (bg, mid, foreground) and use a stepped ease, or is there someway to use a black and white depthmap as a css filter? Thanks for any pointers EDIT: I am planning on using vue js, and gsap, and I am looking at pixi or p5js now

Got it thanks for that demo. I marked this thread as [solved]

OK I think there is probably some simple solution to this but I am kinda stuck here. The start function is causing five polygons to change color. Great All I want to do is stagger those animations so they dont pulse in sync. I tried some setTimeout(), setInterval() methods in the start loop but I couldn't get it.

@mikel - thanks wrt to //morphSVG The purpose of this function here was to provide an initial seed for random lights, that is independent of the mouse cursor. However when I trigger it I get all instances pulsing at once. What I want is to trigger them at some time offset - so it appears like they are triggering individually. I tried using setTimeout but that didn't work.

Thanks for the response. Aside from some polish I think I have it figured out. I was wondering if anyone can comment on how resource intensive this is for a website? Or if there was a better way to accomplish something similar? I dont know why I keep getting "invalid morphSVG tween value: [object Object]" Also, some polygons get stuck "turned on", any thoughts on how to avoid this?

OK I got this going on, which isn't too bad. How do I assign random colors to the state? I don't want to have each tile cycle through all colors