Search the Community

Showing results for tags 'pixi.js'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

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


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 8 results

  1. Hello everyone! I had hoped to unveil this animation to you all when it was completed and running smoothly. Thanks to the the shear volume of detailed answers on this forum and the amazing community of contributors behind it, someone who has no experience with JS , HTML, or even CSS can learn without even asking a question. You should all know how amazing your contributions to this forum are, and I hope this conveys the genuine appreciation from this lurker/beginner. I think it was Craig who said that he started learning JS by copying and pasting, well thats exactly how I learned to make this animation. It's a bit of a Frankenstein's monster, but I understand what I built. Unfortunately, I will have to interrupt my gushing to also add a question. Although my SVG animates exactly how I want, the rendering is obviously jittery. From what I can tell this is in large part due to the strain put on the browser attempting to render: ALL these filters and alpha changes 48 objects simultaneously What can I do to optimize the rendering efficiency of my animation? As far as I've read from this forum and outside sources I have a few options: Slim down and clean up my script. (However, this doesn't fix the rendering problems) Combine GSAP with another js rendering library like three.js or pixi.js (This would fix the rendering strain on the browser. But where to even begin? Also from what I gather rendering SVG paths in WebGL is more challenging, as the WebGL API is primarily built for rendering many triangles.) I understand if what I'm asking might be outside the scope of GSAP. Still a thank you is necessary for getting me to this point.
  2. Hi guys, I am really excited about the newest release of GSAP including the PixiPlugin, but it's not clear to me if it's an EXTRA (for paid members) or comes included in the TweenMax lib? (I am ware that I would need to include the PIXI.js CDN link in my publishing template, just wondering about the GSAP PixiPlugin.js) Finally, would someone be able to share a codepen or .fla canvas file that shows an example of how to use the BLUR filter for example ? Thanks!
  3. helloukw

    Pixi 3D Carousel

    Hello, Anyone knows how to make this codepen example in PIXI.js? The example is made using css properties. I need it to make it in PIXI and I was wondering if anyone knows how to do this. Thanks, ukw
  4. I am trying to use directional rotation plugins together with pixi.js plugins. However, it doesn't seem to be working. If you undo the comments in the codepen: https://codepen.io/asiankingofwhales/pen/RyNKBR?editors=0010, you could see that I tried three different ways: 1 directly adding "_cw" doesn't work 2. using directional rotation plugin without pixi.js plugin result in crazy rotating 3. combining directional rotation plugin with pixi plugin doesn't work at all. no rotations. Can anyone help? Or if this is not possible yet, can anyone shed some lights on how to do directional rotations with pixi.js? This is the simplified versions of a project I am working on: https://codepen.io/asiankingofwhales/pen/JvoWYY?editors=0010. Basically, I have a constantly rotating object, then at one point, I decide to rotate it to a certain point. However, I want all the rotations to be clockwise, which isn't possible at this point. I tried accessing the current rotations values, and then calculate the difference between the current and the destination values, then using the "=+" to do clockwise rotation. However, the value I am accessing always seems to be outdated. Because if the rectangle is constantly rotating, I might be getting a rotation value now, but by the time I used it to calculate differences, it's already moving to a bigger rotational angle. Or am i wrong? Any other other solutions to this problems?
  5. yafitohana

    ThrowPropsPlugin end function

    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 } return naturalStop } }, y: { velocity: 'auto', min: 0, max: 1000, end: function (naturalStop) { if (distanceFromAnotherPixiObject < 50) { return anotherPixiObject.x } return naturalStop } } }, onComplete: () => { delete this.tween } }, 1, 0, 0.4) that code is executed with the event pointerOut and "this" is the pixi object the problem I'm having is that in order to calculate the distance between the 2 objects I need to have both x and y in the end function.. the behaviour I'm trying to do is to snap to an object if the dragged object is close enough.. really need your help with this one, been struggling for a while now thanks in advance
  6. bvkdigital

    Draggable + pixi.js 360 product rotator

    Hey all, I think I have a fun one for Blake, since he's done something very similar. We're about to launch the new website for Carmex lip balm, and we got some awesome 3D product renders made. On the single product pages in the hero area is where these 360 rotators will be featured. What I can't get working is the throwProps! I think it has something to do with how I'm updating the texture frame onDrag... I'm simply incrementing a counter and setting the texture frame to that. I tried really hard to break down the Mario example, but was unable to determine exactly what math to use or how to write the changing of the frame into a tween so throwProps will work. These product rotators would be twice as nice with that feature! Do you think I'm close, or that throwProps is possible with my more basic implementation? Thank you eternally in advance.
  7. Migasubi

    Draw SVG in PIXI.js Canvas

    Hi, Does anyone know of a working example or a pen using the GSAP SVGdraw plugin inside of Pixi.js canvas setup ? The goal is to draw ( animate ) svg paths of an svg redrawn inside of Canvas. ( svg inside the canvas is setup as Pixi graphics object. ) Thanks.
  8. friendlygiraffe

    Pixi.js

    http://www.pixijs.com/ I've discovered this rendering engine to be really fast when rendering games on mobile devices Has anyone used this before? If so would it integrate with GreenSock? Thanks