Samsky Posted January 14, 2021 Share Posted January 14, 2021 Hi everyone, I have spent 2 hours on this menu trying to make it dropdown from the top blue border, instead of sliding out of the left. could you plz help me achieve this? Thanks in advance See the Pen vYXQZjZ by SamShalby (@SamShalby) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted January 14, 2021 Share Posted January 14, 2021 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 4 Link to comment Share on other sites More sharing options...
Solution mikel Posted January 14, 2021 Solution Share Posted January 14, 2021 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 3 Link to comment Share on other sites More sharing options...
Samsky Posted January 14, 2021 Author Share Posted January 14, 2021 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 More sharing options...
Samsky Posted January 14, 2021 Author Share Posted January 14, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now