Is GreenSock capable of something like this

[xPalis]

Hello! So i came from Flash background into html. I have played with bootstrap and feel like its not enough i want something more.  Now i think that GreenSock would be capable of something like this 

 

But i wander how long would it take for me to make something like this? Should i as a flash user be using gsap or maybe there are better tools for html5 animation ? thanks

[PointC]

HI xPalis 

 

Welcome to the forums.

 

GreenSock could animate a navigation list like that - no problem. How long it would take you, I don't know. It would depend on how experienced you are with HTML, CSS and JavaScript as well as GSAP. It wouldn't be too complicated though. I'd suggest starting with a simple hover animation and then worry about the drop-downs. Just start with one button and go from there. 

 

If you get stuck, you can ask questions here and we'll be glad to help.

 

When you do have a question, we need to see live code so we'd ask that you have a CodePen ready.

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

To get started with GreenSock check out:

http://codepen.io/collection/ifybJ/

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

 

Happy tweening and welcome aboard.

[xPalis]

HI xPalis 

 

Welcome to the forums.

 

GreenSock could animate a navigation list like that - no problem. How long it would take you, I don't know. It would depend on how experienced you are with HTML, CSS and JavaScript as well as GSAP. It wouldn't be too complicated though. I'd suggest starting with a simple hover animation and then worry about the drop-downs. Just start with one button and go from there. 

 

If you get stuck, you can ask questions here and we'll be glad to help.

 

When you do have a question, we need to see live code so we'd ask that you have a CodePen ready.

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

To get started with GreenSock check out:

http://codepen.io/collection/ifybJ/

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

 

Happy tweening and welcome aboard.

I really want to move from Flash to HTML5 so i`ll try to do my best and make it work and thanks for the answer, really appreciate it

[Jonathan]

Hello xPalis,

 

That type of effect would be easy with GSAP. All it is just translating in y (translateY) when hovered for the individual menu item text. And some type of image or gradient that translate on the x-axis.

 

The best way to achieve this, is to:

1. First setup all your HTML and CSS to get the menu working without JS.
2. Then you would create event handlers for rolling over and out.
3. Then add the GSAP tweens that animate the effect you desire.

The most important part is just the setup of HTML and CSS, after that it makes animating much easier.

 

In HTML menu navigation whether they are horizontal or vertical are made using unordered or definition lists. And then for the dropdown you use a nested unordered list.

 

So once the menu is setup , adding the animation tweens is the fun part

 

But like PointC advised above we are here to help if you need help using GSAP