Matevz Pevec Posted February 16 Share Posted February 16 Hi, maybe because im working to much on the project, but i cant figure out how to finish my menu animation. the content in .overlay is visible when the animation .nav is playing. I want to achieve that the content from .overlay is visible when . overlay appears.. i know its easy fix, but im kinf of tired :)) See the Pen ExMrXzm by peva92 (@peva92) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted February 16 Share Posted February 16 It is always a good idea to log your values while developing to make sure what you think should happen is also happening. In your case you're just setting the reversed state of the timeline, visually this does nothing it just toggles a value from false to true. What you want is to check if this value is true or false and then .play() or .reverse() (reverse() is different then .reversed(), see the docs if you want to learn more https://gsap.com/docs/v3/GSAP/Timeline/reverse()/ https://gsap.com/docs/v3/GSAP/Timeline/reversed()/) I also highly recommend updating your syntax to the latest version, also instead of x: '0%' we have a property build in for percent values eg xPercent: 0 and you can set the reversed state directly on the timeline it self, so you don't have to set t1.reverse(); Hope it helps and happy tweening! Side note right now it is only possible to click on the text "MENU" to toggle the animation, and because the text moves when you hover you could miss click, I would make it so what everything that you click on would trigger the animation. See the Pen XWGOaBZ?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen 1 Link to comment Share on other sites More sharing options...
Matevz Pevec Posted February 16 Author Share Posted February 16 Ok i will check thank you, i just dont understand why is content inside .overlay visible before .overlay Link to comment Share on other sites More sharing options...
mvaneijgen Posted February 17 Share Posted February 17 I'm not sure what you're saying, you're naming the same element twice in your comment. Link to comment Share on other sites More sharing options...
Matevz Pevec Posted February 19 Author Share Posted February 19 Sorry, what i meant was why is content inside .overlay visible before .overlay animation is triggered Link to comment Share on other sites More sharing options...
Rodrigo Posted February 19 Share Posted February 19 Hi, 57 minutes ago, Matevz Pevec said: Sorry, what i meant was why is content inside .overlay visible before .overlay animation is triggered What particular content? How this animation should work? The way I see it the demo by @mvaneijgen is working as it should, but maybe I'm missing something here 🤷♂️ Happy Tweening! Link to comment Share on other sites More sharing options...
Matevz Posted February 19 Share Posted February 19 Oh, the demo sais: Sorry, we can't show this content because you do not have permission to see it. Link to comment Share on other sites More sharing options...
Rodrigo Posted February 19 Share Posted February 19 This demo? See the Pen XWGOaBZ by mvaneijgen (@mvaneijgen) on CodePen You can copy/paste the url: https://codepen.io/mvaneijgen/pen/XWGOaBZ Link to comment Share on other sites More sharing options...
Matevz Posted February 19 Share Posted February 19 The demo you sent is working yes but i can see the content on <div class="nav-column", i just want the logo to be visible on the black .overlay div Link to comment Share on other sites More sharing options...
Rodrigo Posted February 19 Share Posted February 19 Something like this: See the Pen JjzVjYP by GreenSock (@GreenSock) on CodePen Is just about doing this in the CSS: .nav .nav-column { opacity: 0; visibility: hidden; } Is worth noticing that this is not GSAP related and a rather simple and basic thing in the web development world. I strongly recommend you to get mor knowledge in HTML/CSS in order to grasp these type of concepts in a better way. Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Matevz Posted February 21 Share Posted February 21 Thank you, but what im i trying to achieve is, i have a logo inside .overlay and some .nav-items, the cant be visible when <div class="nav"> is animating (the color part). They must be revealed when the .overlay is revealed Link to comment Share on other sites More sharing options...
Rodrigo Posted February 21 Share Posted February 21 What logo specifically? In your previous post you mentioned the elements with a different class not the logo. On top of that the approach would be the same, just hide the element and then fade in the logo using autoAlpha: 1. If you want to reveal something then I'd suggest you to use clip-path and have everything inside the same element (the one with the black background): https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path Here is a demo of how clip-path works with GSAP (click anywhere): See the Pen GRzWQoQ by GreenSock (@GreenSock) on CodePen This too is really handy when working with clip-path: https://bennettfeely.com/clippy/ Hopefully this helps. Happy Tweening! 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