[Little help for the newbie]

And you can use Draggable with Pixi even though it's canvas/WebGL. Here's an early prototype I made that combines panning, sprite sheet animation, and mousewheel zooming using Draggable. Again, it's complicated, but it shows you that they can work together with a little code.

 

See the Pen 04586ee6fe7a7dd2503e49380a7cfcb2?editors=0010 by osublake (@osublake) on CodePen

 

Pixi also has dragging built in, but you won't be able to use it for DOM elements.

http://pixijs.github.io/examples/#/demos/dragging.js

 

Hello OSUblake,

 

Thank you for your answer. Now I know where to begin. I did see on the link that you shared and when I looked at the javascript panel, I honestly doesn't understand the language structure  . I probably have so much to learn.

[Little help for the newbie]

Hello BigZane,

 

Welcome to the forums!

 

Well, that's pretty big project to emulate. My first recommendation would be to take it in steps (although it sounds like you are already trying to cut it into more manageable tasks) rather than trying to replicate everything that you are seeing.

 

That site that you are linking is using GSAP, although I did not spot where the call to the CDN is, or if they are using a CDN or not. I didn't dig into the code. I can tell you that because I have a little browser extension that sniffs out GSAP for me.

 

So, yes, you can create something like that.

 

For the scrolling, you could create a custom handler but the best option, since you're looking to use GSAP anyway, would be to use Draggable and trigger whatever animation you're thinking of when the .onDrag() event fires or upon reaching the bounds of your dragging area.

 

GSAP can animate any numerical property - and some text as well - it's really down to your imagination how you can use that to create different effects.

 

I don't know of any tutorial that's specific for this case but, have you gone over the basics?

https://greensock.com/jump-start-js

https://greensock.com/get-started-js

 

Hello Dipscom,

 

I am really grateful for your answer and your help. I really am a beginner in this thing so I probably will start from the basic. I already have gone through the basic for GSAP and looked into the forum but I still could not find any topic regarding the background animation in that particular website. I just thought maybe they used some software like Adobe Animate CC or something like that so I know where to start learning. But anyway, I am really grateful for your answer and thank you.  

[Little help for the newbie]

Hello all,

 

I am new in this advance website things and looking for help on my project. I found this site here in awwwards which is amazing to me and I wanna do something similar. There are several things that I found really hard to understand in that website. The first is how they make the drag-able navigation. The second is how to establish multiple contents in one single html page. And the last is how to create the animated background when we scroll the page. 

 

I tried to look at the code in the developer mode and I found that they are using <canvas> tag to draw the animation. But I don't really know how they do it. Can I create something similar with GSAP ? Is there any tutorial that I can follow ?

 

Thank you,

BigZane