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

Hello, I am wondering what is the best way to create the following animation: I want to create an animated hero size image that animates. Basically a large box filled with triangles that are changing color with two functions. One - a slow function affecting every triangle in the box randomly, and two - changing color with a greater frequency within some range of the mouse cursor as it moves across the image. I can think of a few ways to possibly get started but I am not sure the best way to go about it, and why. 1. Create the divs in html, using css grid and then use box sizing with large border size to create many triangle shape appearance. and use event handlers to add classes to the borders for color change on hover. 2. Use java script to manipulate the DOM with iterations - fill a set space (no css grid). Then still add classes to the border for the color change. 3. Create an svg in a vector drawing program. Animate. Either way I plan on using media queries to create three distinct looks at different screen sizes. I appreciate any thoughts or feedback.

Ok thanks. From that I think the key concept is summarized: "ship more granular bundles so that you can retain better cache integrity even in a code base that is changing so your end users can have a fast repeat page load experience". From a practical side, the user likely already has GSAP in cache from visiting a previous site, or it will be stored in cache after visiting my site - so don't make them download the package again. Got it makes sense. So I should link the GSAP to cdnjs, does the same argument apply to jquery? What about less popular vendor scripts. There must be some point where multiple http requests are the bottleneck. Thanks for the replies - I am learning as I go here.

OK thanks that sheds more light on the issue. I like the idea of having all my animations in one place - use one platform for everything. WRT to cdnjs: I am building a static site with npm, gulp, and webpack, and have already set everything up for GSAP and a few other libraries. I was under the impression that generally want to avoid extra http requests for performance. Could you please comment on this?

Thank you for the reply. Ok so simple effects like on mouse hover -> CSS But a sequence like on click rearrange multiple elements ->GSAP

Hi, I am building a new site and plan to use GSAP to animate some svg in the future. My question is: if I am importing such a large and extensive library should I then use it for every animation on the site? Should I use GSAP over css for simple effects of the DOM.. like opacity on hover? I am more comfortable with the css, but I know I need to learn the GSAP anyway for my other ideas. SO the question is should I use GSAP for everything, or use a combination with css?