Conten in div animation

[Matevz Pevec]

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

[mvaneijgen]

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

[Matevz Pevec]

Ok i will check thank you, i just dont understand why is content inside .overlay visible before .overlay

[mvaneijgen]

I'm not sure what you're saying, you're naming the same element twice in your comment. 

[Matevz Pevec]

Sorry, what i meant was why is content inside .overlay visible before .overlay animation is triggered

[Rodrigo]

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!

[Matevz]

Oh, the demo sais: Sorry, we can't show this content because you do not have permission to see it.

[Rodrigo]

This demo?

See the Pen XWGOaBZ by mvaneijgen (@mvaneijgen) on CodePen

 

You can copy/paste the url:
https://codepen.io/mvaneijgen/pen/XWGOaBZ

[Matevz]

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

 

 

 

 

 

[Rodrigo]

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!

[Matevz]

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

[Rodrigo]

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!