Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

autoAlpha switch tween

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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!

  • Like 3
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

@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. 

Link to comment
Share on other sites

  • Solution

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

  • Like 5
Link to comment
Share on other sites

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.



  • Like 4
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.