en en en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en de en en fr en en ca en en en en en en en ms en en en en en id en en en sv en en en en en en en en en en en en en en en en en en en en en de en en en en en en en en en en en en de en en en en en en en en en en en it en it en en fr fr en en en en en en en en en en en en en en en en en en ca ca en en en en en en en en en en en en en de en en en en sv en en en en en en en en de en en en en en en en en en en en en en en en en en en en ms en en en en es en es en de en en en en en en en de en hu en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
I've been trying to create an accordion menu with GSAP.  I have 3 menus and I want the others to reverse their animations when one is clicked.  Each menu item also has a hover state.. which I think is causing my issue.
If you click around on the menu items quickly, then sometimes an element is left with it's old boxshadow property.
If you check out the codepen I think you'll get a good idea of what I'm talking about.  Is there a better way to do what I'm trying to do?
See the Pen b65004e402311a218643e81a8c27769c by jgknott (@jgknott) on CodePen
Welcome to the GreenSock forum.
I didn't have time to run through all of your code, but it looks like all of your package divs have the same timeline and same mouse events so you can condense that quite a bit. You could use jQuery's each() method to create the timelines and not(this) selector to control the active one separately.
Your question reminded me of a recent thread that I think could be quite helpful to you. Please take a look here:
Hopefully that gets you closer to a solution.
Happy tweening and welcome aboard.
Share on other sites
OSUblake    9,990 Likes (Superhero)
Posted January 6, 2017
Here are 2 different accordions you may find useful...
See the Pen JYQqZr by osublake (@osublake) on CodePen
See the Pen b52cfca05ff7d8a8e9ce3b0213539cf8?editors=0010 by osublake (@osublake) on CodePen
Share on other sites
Jonathan    5,176 Likes (Superhero)
Posted January 6, 2017
Hello jknott and Welcome to the GreenSock Forum!
So your codepen was private so i had to rebuild it to test and share it with you.
The example below uses a onReverseComplete callback to set() the clearProps property for box-shadow.
See the Pen vgOLmj?editors=0010 by jonathan (@jonathan) on CodePen
A comma-delimited list of property names that you want to clear from the element's "style" property when the tween completes (or use "all" to clear all properties). This can be useful if, for example, you have a class (or some other selector) that should apply certain styles to an element when the tween is over that would otherwise get overridden by the element.style-specific data that was applied during the tween. Typically you do not need to include vendor prefixes. CSSPlugin automatically applies the vendor prefix if necessary too
//tweens 3 properties and then clears only "left" and "transform" (because "scale" affects the "transform" css property.) TweenLite.from(element, 5, {scale:0, left:200, backgroundColor:"red", clearProps:"scale,left"});
onReverseComplete : Function - A function that should be called when the tween has reached its beginning again from the reverse direction. For example, if reverse() is called the tween will move back towards its beginning and when itstime reaches 0, onReverseComplete will be called. This can also happen if the tween is placed in a TimelineLite or TimelineMax instance that gets reversed and plays the tween backwards to (or past) the beginning.
var select = function(s) { return document.querySelector(s); }, selectAll = function(s) { return document.querySelectorAll(s); }; var delay = 80, animLength = .4; var active = "basic", basic = select('#basic'), preferred = select('#preferred'), elite = select('#elite'); var basicTl = new TimelineMax({ paused: true }) .to('#basic', animLength, { height: 500, width: '+=16', x: '-=8', zIndex: 50, boxShadow: '2px 7px 30px 0 rgba(0,0,0,0.10)', backgroundColor: '#FFFFFF', ease: Back.easeIn.config(.2), onReverseComplete: function() { TweenMax.set("#basic", { clearProps: "box-shadow" }); } }) var prefTl = new TimelineMax({ paused: true }) .to('#preferred', animLength, { height: 500, width: '+=16', x: '-=8', zIndex: 50, boxShadow: '2px 7px 30px 0 rgba(0,0,0,0.10)', backgroundColor: '#FFFFFF', ease: Back.easeIn.config(.2), onReverseComplete: function() { TweenMax.set("#preferred", { clearProps: "box-shadow" }); } }) var eliteTl = new TimelineMax({ paused: true }) .to('#elite', animLength, { height: 500, width: '+=16', x: '-=8', zIndex: 50, boxShadow: '2px 7px 30px 0 rgba(0,0,0,0.10)', backgroundColor: '#FFFFFF', onReverseComplete: function() { TweenMax.set("#elite", { clearProps: "box-shadow" }); }, ease: Back.easeIn.config(.2) }) basic.addEventListener('mouseover', function() { TweenMax.to(this, .2, { boxShadow: '0 0 30px 0 rgba(0,0,0,0.12)' }) }); basic.addEventListener('mouseout', function() { if (active !== "basic") { TweenMax.to("#basic", .2, { boxShadow: '0 0 6px 0 rgba(0,0,0,0.12)', backgroundColor: '#F9F9F9', onReverseComplete: function() { TweenMax.set("#basic", { clearProps: "box-shadow" }); } }) } }); basic.addEventListener('click', function() { runSideAnimation('basic'); }); preferred.addEventListener('mouseover', function() { TweenMax.to(this, .2, { boxShadow: '0 0 30px 0 rgba(0,0,0,0.12)' }) }); preferred.addEventListener('mouseout', function() { if (active !== "preferred") { TweenMax.to(this, .2, { boxShadow: '0 0 6px 0 rgba(0,0,0,0.12)', backgroundColor: '#F9F9F9', onCompleteParams: [this], onReverseComplete: function(t) { TweenMax.set(t, { clearProps: "box-shadow" }); } }) } }); preferred.addEventListener('click', function() { runSideAnimation('preferred'); }); elite.addEventListener('mouseover', function() { TweenMax.to(this, .2, { boxShadow: '0 0 30px 0 rgba(0,0,0,0.12)' }) }); elite.addEventListener('mouseout', function() { if (active !== "elite") { TweenMax.to(this, .2, { boxShadow: '0 0 6px 0 rgba(0,0,0,0.12)', backgroundColor: '#F9F9F9', onReverseComplete: function() { TweenMax.set("#basic", { clearProps: "box-shadow" }); } }) } }); elite.addEventListener('click', function() { runSideAnimation('elite'); }); function runSideAnimation(section) { switch (section) { case "basic": active = "basic"; basicTl.play(); setTimeout(function() { prefTl.reverse(); eliteTl.reverse(); }, delay) break; case "preferred": active = "preferred"; prefTl.play(); setTimeout(function() { eliteTl.reverse(); basicTl.reverse(); }, delay) break; case "elite": active = "elite"; eliteTl.play(); setTimeout(function() { prefTl.reverse(); basicTl.reverse(); }, delay) break; default: basicTl.play(); break; } } runSideAnimation();
Share on other sites
jknott    10 Likes (Newbie)
Posted January 7, 2017
Wow, thanks for all the great responses and I really appreciate the level of detail you went into Jonathan!
I had no idea about onCompleteParams and sending that into the onReverseComplete function, that's awesome!!  I also had to clear the background-color prop, but that solved my issue.  Thank you all!
Share on other sites
Create an account or sign in to comment
You need to be a member in order to leave a comment
Sign up for a new account in our community. It's easy!
Register a new account
Already have an account? Sign in here.
Sign in to follow this   Followers 0
Go to topic listing
Recently Browsing   0 members
No registered users viewing this page.
Accordion Menu / Reverse timeline doesn't seem to always reset all the way
“GSAP and CSS Transitions: I've done both, and its like comparing an F16 to a horse. Take like 10 minutes to try.”
“GSAP makes my job fun, because it allows me to focus on creating rich, engaging web experiences, while GSAP handles much of the implementation details behind the scenes.”
“Go and browse through FWA or Awwwards, then view source of anything you see that has cool animation and you will be surprised how widely GSAP is used.”
“After searching around the web for alternatives, I found GreenSock to be the most performant.”
“If every library were as robust and reliable as GreenSock’s, the world would be a much better place for software engineers and their clients. I can't think of a better designed or better performing tool, and as a bonus, it's fun as heck to play with.”
“Honestly think without TweenMax, I'd of changed careers by now; it's that good.”
“GSAP was a revelation for me to be compared with the introduction of jQuery”
“@greensock it’s a great library that many people love, and I know you care deeply about performance :)”
“Spent today converting an animation to pure CSS, and then into GSAP. GreenSock was an order of magnitude easier. Love it.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.