Jump to content
Search Community

autoAlpha switch tween

kathryn.crawford test
Moderator Tag

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

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

 

:D

  • 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.
×
×
  • Create New...