Jump to content
Search Community

Is greensock useful for an auto-deploy menu

C.Surieux 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



The design of my site include a floating menu built with bootstrap.


On landing page which is a kind of one page site with 8 areas, the menu stays static on the bottom of screen, so when the content scrolls, part of this content is hidden by the fixed menu.

I would appreciate to be able to reduce its width from all the width to a round image on its left. Clicking the image would deploy horizontally the menu bar on/off.


On others pages it behaves more as a fixed top bootstrap menu but with a  height which eats part of the page. Here I would appreciate to have it automatically reducing it height when the mouse is not over its area. But I want to keep all this cool enough to avoid trying to click on already reduced part of it.


I hope my explanations are clear.


Thanks for a direction to start.

Link to comment
Share on other sites

Hi C.Surieux  :)


I'm not 100% sure what your question is, but GreenSock is very useful for any type on animation you want to do. If I'm understanding your desired outcome, scaling menu height on hover or sliding menus on/off screen by clicking an image is no problem at all. 


If you're asking how you start your project, I'd say just put together all the basics of the page/site with some plain divs, placeholder text and the <ul> or however you're designing the menu. I wouldn't worry about final styling on anything until the animations are the way you want them.


If you haven't visited these pages yet, I'd take a look at them to get an understanding of the basics:




If you have specific problems as you're setting up the animations, everyone around here will be happy to assist you. A CodePen will always get you the best answers.



Hopefully that helps a little bit as you get started with your site.


Happy tweening.


  • Like 4
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...