bvkdigital

I found myself asking the same thing as @ptd in recent months. Finally I found an Adobe After Effects script that converts an AE ease to Greensock custom ease, such as: M0,86.4187C32.9957,86.4187,0,-1297.5813,91,-1297.5813C93,-1297.5813,96,-1297.5813,97,-1297.5813 https://github.com/SupportClass/ae-ease-to-gsap-customease Hopefully this helps developers who work in tandem with interactive designers, where there's a handoff of interactive requirements/mockups.

You heard it here everyone, math is sexy. Blake, thanks so much for explaining your code. Very smart stuff. Anyone trying to make a 3D product rotator, if you made it this far you can probably figure it out, but it goes something like this: Create the sprite sheets and json files for loading into pixi.js (Hint Texture Packer can export for pixi.js Hint) Get your sprite sheet animation working, watch that sucker animate Create a draggable instance and updateImage function as seen in Blake's example instead of .play() on the anim, use goToAndStop(), also seen in Blake's example

Absolutely that is what I was looking for, thank you. You can mark this as completed, and I'll leave my codepen for before/after illustration purposes.. Would you mind commenting your codepen, specifically inside the updateImage function? (or explain here)... How you so quickly whipped up the math for taking the product rotation += deltaX * speed, why 360 is the magic number (seems odd because it's not actually a 3D object, but rather a 2d sprite), why the % operator works here.. Since this seems to be the best option for a 360 product rotator, I hope this can help others looking for a solid, basic pixi.js implementation. My fascination with this is mostly how the math works, now that it works.

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.