Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'pixi'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 25 results

  1. GreenSock

    PixiPlugin

    PixiJS is a canvas library that can utilize WebGL for insanely fast rendering, plus it has all sorts of crazy filters and fun effects. You could always use GSAP to animate PixiJS objects (after all, GSAP can tween any property of any JS object), but it was a tad cumbersome with certain properties because they're tucked inside sub-objects in PixiJS's API, like object.position.x, object.scale.y, object.skew.x, etc. Plus PixiJS defines rotational values in radians instead of degrees which isn't as intuitive for most developers/designers. PixiPlugin saves you the headaches: //old way (without
  2. Hi guys, I've seen this beautiful site https://browserhistory.squarespace.com/ and I've tried to replicate animation for a test. I started project with PIXI.js and the integration with GSAP sound good. But, how could be possible to manage the scroll and have effect in canvas? Anyone have ideas? I've supposed ScrollTrigger could be the way for snap and repeat but I'm not sure about the right trigger to use 😅 Thanks to anyone
  3. Hello GSAP, I am wondering if ScollTrigger is usable with Pixi? I am creating a storytelling site where element movements are dependent on scroll triggers. I'm aware that browser scrollbar is needed for ScrollTrigger but a fullscreen Pixi canvas doesnt have scrollbars. Maybe I am taking the wrong approach here? Taking any help or suggestions. Here are a couple of examples. https://zumi.gucci.com/ https://go.pioneer.com/cornrevolution Thanks, much appreciated.
  4. Hello Folks, I have a specific case which I am not sure how to handle: I have an array of PIXI Sprites that I would like to stagger to another set of X, Y coordinates. While they each have specific start coordinates assigned to them, their destination coordinates are defined by an offset from a target destination point. The effect that I want is for the sprites to tween in formation - think of a squadron of planes, or a vee of geese, flying together in formation. What I need to accomplish this, then, would be not unlike the map function where I can iterate through an array of objects,
  5. Hi, I'm curious about whether something I'm doing in svg will be possible in PIXI. I'm building complex svg diagrams that animate, but also with aspects of them that I want to be able to animate zoom on, (almost) infinitely (think Mandelbrot set like zoom but data-visualization related). Currently I'm using svg for that infinite scaling capability, but I know that for some of my data sets, svg isn't going to cut it eventually. It'll just become too much weight on the DOM / CPU at some point as there will simply be too many things on the screen to render, forget animate.
  6. I'm working on a project using ReactJS with Pixi & GSAP and the js library I'm using is called "react-pixi-fiber". I'm trying to reference the React Pixi Sprite object and handling the animation it using GSAP. However, it changes position without easing, and there's no error message showing. Code as below The "moveEle" function will be called from the parent component. class MainObject extends Component { constructor(props) { super(props); this.state = { ... }; this._refEle = React.createRef(); moveEle = options => { TweenLit
  7. Legends, I need some guidance. Who can help me in the right direction? I'd like to replicate the effect on the homepage of https://www.barovier.com/it/. The lighting and the ripple effect on the background image. Any idea how this can be achieved?
  8. Hi guys, lately I finally started to create some small project with GSAP (slider, simple animations, etc). I thought it was an amazing tool, so I wanted to go deeper and I discovered some sensational works. My goal is to improve my skills for design better user experience, by making animations and immersive interactions. I was very fascinated by works like this: https://www.sartobikes.com/ In many similar websites, I've seen that developers have almost always used GSAP and Pixi. I tried to do some research to understand how the two libraries can work so well, but I did not find a
  9. Hi guys, i search some code example on this forum, but i found nothing that show a Pendulum effect with tweenLite or with TimelineLite? Someone would have a functional example to create a permanent pendulum effect? My target it to get something similar that spine2D allow. for help to understand, i just want replace spine by vanilla js and vanilla tweenLite feature, because i get more performance after my test with tweenLite. But am not sure how do a pendulum loop with tweenLite. If you can provide me demos or link to the docs it will be wonderful Mayb
  10. Hi guys, what the best way to toggle (disable and active) rendering before animation. i have issue here if you fast click on interaction. I need active rendering before show , and disable rendering after hide. But if i fast click, i get issue. hope i explained myself good. Thank for help
  11. Hello! I'm find the perfect animation example but it works only on one image and in default mode (autoplay on page load). I need to init this only on mouseenter event and for each current image. Important note: In this example hover works, but I need to copy animation effect, which works on page load, to hover event. The default hover animation isn't correct for me. Thanks This is example in codepen with default animation Init script var spriteImages = document.querySelectorAll( '.project-image' ); var spriteImagesSrc = []; for ( var i = 0; i &l
  12. Hello. I tried to get a kind of focus helper with the mouse when the pointer rolls over an item. but i can get a good easing when the mouse are hover a element. I do not know if I explain myself well, but I will try. i use the pointerLock API. when the mouse icon get hover a new elements, i want to help the mouse to move to center of element. But without disturbing the control of the mouse. the idea is to create a focus helper to center the pointer on the elements when the mouse has a contact with the outlines. i try my best to make a codepen. for active
  13. Hi guys! I have some problem tring to animate some PIXI filters inside a timeline with other dom element animations. I provide a pen with an example of slider. My goal is to animate blur filter and dom element in the same timeline. The problem is that in swap Timeline tween with dom element tween doesn't start. swap .fromTo(blurFilter, SWAPTIME, { blur: 10 }, { blur: 0, yoyo: true }) .fromTo(canvasContainer, SWAPTIME, { scale: 1 }, { scale: 1.1, yoyo: true }) Any suggestions? Thank you
  14. Would anyone know a method or algorithm in JS to calculate and detect if a mouse is moving by a circle around a target? Example if a rotate mouse *2 time around a specific XY point, i would like to re-center my camera obj. (in my context i need algoritme for a camera engine) I search i little bit on the web, but no found good formula to perform this. Maybe a will need a special api ? or a easy trick to do this with GSAP ? i take a try on this forum, i not find similar codepen project to do this. thank for suggest guys. in context, the target posit
  15. hi it possible to use chaining function ease instead of property ? What a read it that TweenLite.to(obj, 2, {pixi:{pivotX:x, pivotY:y},ease:Power2.easeOut}); but i look for a way to write the easing like this, with chaining ? I took this habit on an old Easing library. TweenLite.to(obj, 2, { pixi:{pivotX:x, pivotY:y} } ).ease(Power2.easeOut); Existe a way to write ease more eyes friendly ? thank Am new from some minute ago , so am studying this library:)
  16. Hi, I am new to GSAP. Hence I need to know how to integrate GSAP to PIXI.Container. Basically, I need to move the container out of focus by -GAME_WIDTH Like, TweenMax.to(container.position, 1, {x:-GAME_WIDTH}); Thank you.
  17. Hey, Been using GSAP for a while now, but I have a problem with the snap feature of ThrowPropsPlugin. I'm currently working on a project that includes pixi.js and I'm using GSAP to animate. since I'm using pixi and not regular html elements I decided to use ThrowProps directly and not draggable. here's a snippet: this.tween = ThrowPropsPlugin.to(this, { throwProps: { x: { velocity: 'auto', min: 0, max: 1000, end: function (naturalStop) { if (distanceFromAnotherPixiObject < 50) { return anotherPixiObject.x
  18. Hi, Recently, I'm trying to explore slightly more advanced animations. I'm scoured the web, forums for any examples, but it seems I'm stuck. Wondering if anyone can point me in some directions. I'm trying to achieve an similar effect like this -> https://looi.co/ But, probably not as complicated as this site. I believed there's certain level of 'voodoo' in this lol. The example above is using Three.js, nt sure if greensock is being used. I'm looking to do some interactions, and gravity in my visualisations. See, my attached design -> So the letter in the cente
  19. I'm getting pixelation when using pixi.js sprites with gsap. I doubt this is a gsap or pixi problem, I'm sure it has to do with how I'm combining them. in the codepen example: pixiBug on left is pixi.js & gsap and we're getting pixelation on scale down domBug on right is DOM & gsap and edges are smooth no matter the scale. What am I missing here? Thanks!
  20. Is there a built in way to get the ColorPropsPlugin to hand back a number instead of rgb? See the codepen for an example of a quick fix that makes it tween with an extra function call. Click on the box to change the color. Also you will need to use a browser with webgl since there is a bug with the tint & canvas. Also on a side note it seems to flash to white each time its clicked, which is not what I expect. That is not related to the ColorPropsPlugin, correct?
×