Help: How to show / animate hidden <div>s.

[superunknown]

Hey guys. Sorry for the (extremely) noob question, but I'm having trouble wrapping my mind around this type of functionality.

 

What I need, basically, is:

1. Animate adding or removing the the .active class on the links. It doesn't really matter what type of animation, a simple fade in or X translation would do, I'm just not sure where to put the tween in the jquery.
2. Animate adding or removing the .active class on the .content <div>s when clicking each corresponding button on the menu. I'm not sure how to target each div depending on which button you click. Each one has an #id, but I'm pretty sure there must be a way to do what I need with some sort of loop, instead of creating 5 functions (one for each <div>). And I still don't know where to put the animation, same as with the first item. 

 

The code in this thread looks almost exactly what I need, but it's a liiiittle too complex for me to follow (still struggling with jquery), and it seems to have a few things I don't really need, like a fixed height for the content and a few other calculations that seem to be unnecessary for what I need (maybe they're not, though!).

 

Can anyone help with this?  

 

Thanks!

See the Pen OJJOoRM by superunknown (@superunknown) on CodePen

[ZachSaucier]

Hey superunknown and welcome.

 

There are a lot of ways to do this sort of thing. See if you can figure out my approach here:

 

See the Pen ExxbdKq?editors=0010 by GreenSock (@GreenSock) on CodePen

 

It would likely be helpful to take a free online course about CSS and JavaScript  

[superunknown]

Hey Zach! Thanks for taking the time to help! This forums are great.

 

 I think I can kind of understand what you're doing, but I have two problems with this approach. 

 

1. Initially, both the first button and the first content <div> should be visible, so if every content <div> must have visibility set to hidden, that's a problem. 

2. I can't figure out why, but the content <div>s sort of "jump" to the middle of the viewport when I click on any of the buttons, and the menu sort of dissapears (it's still there, and visible, but just off-screen). Is there any way of avoiding that?

[superunknown]

Ok, so I found a way to get it working exactly as I want, but alas, with no animation.

How do I incorporate gsap into this, in order to animate the .content divs?. 

 

Thanks!

 

Btw, I got the code working thanks to this video: 

 

[ZachSaucier]

Hey superunknown, 

 

Generally it's best to make a fork of your old code so that threads like this have different versions of your code. That way it can still be followed along by future readers. 

 

12 hours ago, superunknown said:

I found a way to get it working exactly as I want, but alas, with no animation.

How do I incorporate gsap into this, in order to animate the .content divs?

That's pretty much exactly what my approach is doing, just using jQuery (and the hidden attribute) to do it.

 

You can animate it by passing in the id as the target in a GSAP tween:

 

TweenMax.from(id, 1, {autoAlpha: 0});

See the Pen QWWaWPy?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Again, I would highly recommend learning the basics of CSS, JS, and GSAP. It will really help with your future projects and save you time in the end. Here's a great getting started article for GSAP: 

 

[superunknown]

6 hours ago, ZachSaucier said:

Hey superunknown, 

 

Generally it's best to make a fork of your old code so that threads like this have different versions of your code. That way it can still be followed along by future readers. 

 

That's pretty much exactly what my approach is doing, just using jQuery (and the hidden attribute) to do it.

 

You can animate it by passing in the id as the target in a GSAP tween:

 

TweenMax.from(id, 1, {autoAlpha: 0});

 

 

 

Again, I would highly recommend learning the basics of CSS, JS, and GSAP. It will really help with your future projects and save you time in the end. Here's a great getting started article for GSAP: 

 

 

Thanks Zach! The tween in your example doesn't seem to be doing anything, though. I tried changing a few parameters, just the duration for starters, and it doesn't seem to have any effect. 

 

[ZachSaucier]

39 minutes ago, superunknown said:

The tween in your example doesn't seem to be doing anything, though. I tried changing a few parameters, just the duration for starters, and it doesn't seem to have any effect.

I changed the duration to 10 to prolong the effect and it works just fine. What do you mean "it doesn't seem to have any effect"?