Share Posted November 29, 2018 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 anything quite clear and complete that could help me. What I found on pixi seems far from what I would like to do and what I learned from Greensock I think is not enough! I need to understand where I can start with these two tools! A guide, a series of examples or exercises, a book, something that tells me: "this is the right way to do it". In the last days I'm just grasping at straws, and it's really frustrating. I would love to be able to implement my ideas on the code through this special alchemy! What is for you the best starting point? Thanks to all of you! 1 Link to post Share on other sites
Share Posted November 29, 2018 Hm, I'm not aware of any complex tutorials that'd show you exactly how to recreate something like https://www.sartobikes.com, but I guess I'd just say to think of PIxi like the rendering layer, and GSAP is simply the tool that can animate anything you want. So it isn't as if you need to learn some secret ways of mashing the two technologies together - just build in Pixi and reach for GSAP whenever you want to animate any properties. If you're not familiar with Pixi yet, I'd definitely recommend spending some time getting up to speed. From what I understand (and I'm no expert), it's a very rich canvas-based platform. @OSUblake is our resident expert around here. And there is a GSAP PixiPlugin to make things easier. Good luck with your project! I'm sure that as you get up to speed with both GSAP and Pixi, you're gonna be really excited about what you can accomplish. 4 Link to post Share on other sites
Share Posted December 8, 2018 On 11/29/2018 at 12:52 PM, LoBusker said: I need to understand where I can start with these two tools! A guide, a series of examples or exercises, a book, something that tells me: "this is the right way to do it". Finding a good animation tutorial is hard. Finding one that shows how to do complex interactions with GSAP and PixiJS is going to be even harder. I seriously doubt one even exists. You're going to have to learn it the same way everybody else has, through your own experimentation and research. Start out small, and don't be so ambitious. Make a bunch of pointless stuff, and build off that. There is no "right way" to do it. If you get the result you want, then it's right. Sure, there are better ways of doing things, but that shouldn't be your focus while learning. A little demo to get you started. Based on one of @PointC's first experiments with PixiJS. See the Pen wRwYre by osublake (@osublake) on CodePen GSAP Resources this forum CodePen https://codepen.io/search/pens?q=pixijs&page=1&order=popularity&depth=everything&show_forks=on https://codepen.io/search/pens?q=pixi&page=1&order=popularity&depth=everything&show_forks=on PixiJS Resources https://github.com/pixijs/pixi.js/wiki/Getting-Started https://pixijs.io/examples/#/basics/basic.js https://github.com/kittykatattack/learningPixi https://github.com/pixijs http://pixijs.download/release/docs/index.html http://pixijs.io/pixi-filters/tools/demo/ https://pixijs.io/pixi-filters/docs/ 5 2 Link to post Share on other sites
Share Posted December 8, 2018 Hello @LoBusker I've been in this same situation as you, I really like the GSAP + PixiJs junction and I also decided to venture using both. When I was learning I made a Pen, commenting line by line and in the end has a small demonstration of how to use the PixiPlugin of GSAP, Already do a lot of cool things using the filters as demonstrated by @OSUblake I hope it helps you in some way: See the Pen MQyyze by Noturnoo (@Noturnoo) on CodePen 3 Link to post Share on other sites
Share Posted March 30, 2019 Quote There is no "right way" to do it. If you get the result you want, then it's right. Sure, there are better ways of doing things, but that shouldn't be your focus while learning. This held me up in learning, this stuff, so many ways to do stuff with html css, that it's a lot simpler to go by what you see.. Thanks Link to post Share on other sites
