Jump to content
Search Community

full menu navigation dropdown

Samsky test
Moderator Tag

Go to solution Solved by mikel,

Recommended Posts

Hi @Samsky It is hard to understand what your code needs to do, because when disabling all javascript nothing is visible. What I would recommend is first styling everything with just CSS and placing it where in needs to end up and when that is done adding in the Javascript, right now everything is `width: 0%` and absolutely hidden which makes the CSS fight with GSAP and this doesn't have to be the case. 

 

Also you are using a really old version of GSAP (version 2) which is much harder than the new version 3. I would also suggest taking a look at some tutorials on youtube that are of the past year of so. To name a few channels that helped me: Ihatetomatoes, snorklTV, DesignCourse and of course the Greensock channel its self https://www.youtube.com/user/GreenSockLearning

 

 

  • Like 4
Link to comment
Share on other sites

  • Solution

Hey @Samsky,

 

You need a concrete width, animate the height and not the width and ideally with a  .from tween

 


// css
.nav {
    position: absolute;
    width: 100%;
    height: 100%;
    ...
}
    
// js
    
t1.from(".nav", 1.5, {
 height:'0%',
 ease: Expo.easeInOut,
 y: '0%',
 // ease: Back.easeOut
});

 

Happy tweening ...

Mikel

  • Like 3
Link to comment
Share on other sites

19 minutes ago, mvaneijgen said:

Hi @Samsky It is hard to understand what your code needs to do, because when disabling all javascript nothing is visible. What I would recommend is first styling everything with just CSS and placing it where in needs to end up and when that is done adding in the Javascript, right now everything is `width: 0%` and absolutely hidden which makes the CSS fight with GSAP and this doesn't have to be the case. 

 

Also you are using a really old version of GSAP (version 2) which is much harder than the new version 3. I would also suggest taking a look at some tutorials on youtube that are of the past year of so. To name a few channels that helped me: Ihatetomatoes, snorklTV, DesignCourse and of course the Greensock channel its self https://www.youtube.com/user/GreenSockLearning

 

 

Thank you. 

Honestly  i'm very overwhelmed. I don't what to focus on anymore. there's too much to learn at the same time work has to be done on the side. 

it's just too much information. 

 

thanks for the advice!

Link to comment
Share on other sites

20 minutes ago, mikel said:

Hey @Samsky,

 

You need a concrete width, animate the height and not the width and ideally with a  .from tween

 



// css
.nav {
    position: absolute;
    width: 100%;
    height: 100%;
    ...
}
    
// js
    
t1.from(".nav", 1.5, {
 height:'0%',
 ease: Expo.easeInOut,
 y: '0%',
 // ease: Back.easeOut
});

 

Happy tweening ...

Mikel

Thank you Mikel this helps. 

good day to you!

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