Little help for the newbie

[BigZane]

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

[Dipscom]

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

[BigZane]

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.  

[Dipscom]

If you've gone over the basics, now is time to try some experiments.

 

How about you go to CodePen and look at Greensock's

See the Pen by search (@search) on CodePen

. Fork one and see if you can make an element move by dragging a second element.

[OSUblake]

That site is using Pixi.js, and it plays very well with GSAP. Unfortunately, the docs and examples for Pixi are somewhat limited, and you kind of have to figure stuff out on your own. I have a lot of demos using Pixi on

See the Pen public by osublake (@osublake) on CodePen

, but most of them are pretty complicated, and probably not the best examples to use for learning. 

 

I would start by looking at all of the examples on the Pixi page, and then play around with incorporating GSAP into them. Here's a very simple example that compares rendering HTML, SVG, and PIXI with GSAP.

 

See the Pen PZgOqe?editors=0010 by GreenSock (@GreenSock) on CodePen

.

[OSUblake]

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

[BigZane]

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.

[OSUblake]

Yeah, that's why I said most of my Pixi examples would be hard to learn from as I usually code them in TypeScript, which is a superset of JavaScript, much like SASS is to CSS.

 

You can copy and paste my TypeScript into the left pane on the TypeScript Playground, and it will convert it to regular JavaScript in the right pane.

http://www.typescriptlang.org/play/

 

I also use a lot of classes, which is a new feature of JavaScript. Yes, there's a lot of stuff to learn, especially with canvas development, but once you get it, it stays with you. If you need help understanding anything I've done, just ask.