Jump to content
Search Community

Become better web designer by using GSAP and Pixi

LoBusker test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!

  • Like 1
Link to comment
Share on other sites

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. 

  • Like 4
Link to comment
Share on other sites

  • 2 weeks later...
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/

 

 

 

  • Like 5
  • Thanks 2
Link to comment
Share on other sites

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

 

  • Like 3
Link to comment
Share on other sites

  • 3 months later...
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 comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...