autoAlpha switch tween

[kathryn.crawford]

I'm trying to do an autoalpha switch with a navigation. To prevent the page from getting too crowded, I'm tweening autoalpha for the appropriate content when the nav element is clicked. I've created a loop to create the timelines and listeners, and then calling the timelines on the appropriate "titles" click. Right now, the tween works if you click the titles once each, but if you try to switch back and forth, the timelines are no longer tweening.

See the Pen ojKXOd by kathryncrawford (@kathryncrawford) on CodePen.

[celli]

did you try using:

//clear all inline properties
TweenLite.set("#element", {clearProps:"all"});

That will clear the autoAlpha:0 , and you can use a .from tween

[kathryn.crawford]

@celli, I replaced the autoAlpha: 0 tween with clearprops, but I'm still having the same issue. It only works 1 time per nav item.

[celli]

I think I'll let the experts in the forum take it from here, it might be more of the way it is set up inside of the function. Sorry I couldn't be of more help!

[Jonathan]

I'm a little confused on the behavior you are looking to achieve? Are all the list items supposed to disappear on click or just toggle the display on and off like an accordion list?

 

Any additional info will be greatly appreciated to better help you, Thanks!

[Dipscom]

I had a quick look at you pen, the console throws a few errors. There is one where it complains you are trying to tween a null object.

 

If what you are after is a switch toggle, check out OSUblake's answer on this other thread. This is what I understood you are after.

[kathryn.crawford]

@Dipscom I'll give that a shot and see if it works.

 

@jonathan, I am trying to make sure only one of the "hidden" divs (lines 54 and 80) within the "wrapper" div (line 52) are visible. I want the user to be able to click on the appropriate nav item, and when that happens, any other visible "hidden" div should be set to autoAlpha: 0, and the div corresponding to the nav item will fade in in it's place. I hope that makes a little more sense. It's working now, somewhat, but it stops working if you try to switch back and forth between the two top nav items more than once. 

[kathryn.crawford]

@Dipscom, so I've implemented OSUblake's solution, but I'm afraid I'm super new to jquery, so I don't really understand how I can go about animating the plays divs with clicking on the titles divs.

 

See the Pen ojKXOd?editors=101 by kathryncrawford (@kathryncrawford) on CodePen.

[OSUblake]

It's not going to work the way you set it up. You have a bunch of links and two elements with no relationship between them. To create a relationship I just added a data-play attribute to the links and the containers. So when you click on a click, it passes in the value of data-play to check if the animation should play. You only had two containers, so only the artesia and borrowed plumage links will do anything.

 

See the Pen jbgeEQ?editors=001 by osublake (@osublake) on CodePen.

[Dipscom]

There you go Kathryn, the man himself.  I say, if we wish upon a star hard enough, Carl might sweep down and grant us an extra pro tip and if we really mean it, we might even get the honour of being burned by the shinning radiance of the CODE-GOD Greensock in his holy digital form.

 

[kathryn.crawford]

@OSUBlake, once again thank you for educating us beginners.