mulegoat Posted November 23, 2021 Share Posted November 23, 2021 Hi everyone, I've got an issue with an accordion that I cobbled together after viewing a thread on here. Zachs original pen used a basic tween to toggle open/close states See the Pen gOWGKQZ by ZachSaucier (@ZachSaucier) on CodePen I ammended mine slightly to use a timeline to tween the accordion content and animate the menu icon. Works fine however I have to click the accordion menu item twice before it works? After the first item is expanded everything works as it should but I can't figure out why that extra click is required at the start? Any help would be great. My accordion function: function initAccordion() { const accordion = select('.js-accordion'); if (!accordion) { return; } else{ const groups = gsap.utils.toArray('.js-accordion__group'); const menus = gsap.utils.toArray('.js-accordion__menu'); const animations = []; groups.forEach(group => createAnimation(group)); menus.forEach(menu => { menu.addEventListener('click', () => toggleAnimation(menu)); }); function toggleAnimation(menu) { // Save the current state of the clicked animation const selectedReversedState = menu.animation.reversed(); // Reverse all animations animations.forEach(animation => animation.reverse()); // Set the reversed state of the clicked accordion element to the opposite of what it was before menu.animation.reversed(!selectedReversedState); } function createAnimation(element) { const menu = element.querySelector('.js-accordion__menu'); const box = element.querySelector('.js-accordion__content'); const icon = element.querySelector('.js-accordion__icon'); gsap.set(box, { height: 'auto'}) gsap.set(icon, { rotation: 90}) const tlAccordion = gsap.timeline({ reverserd:true, paused: !0, onComplete: updateLoco }); // Keep a reference to the animation on the menu item itself tlAccordion .from(box, { height: 0, duration: 0.5, ease: 'power1.inOut' }) .to(icon, { duration:0.25, rotation:-90, ease:'linear' }, '<'); menu.animation = tlAccordion; animations.push(tlAccordion); } } } Many thanks in advance Marco See the Pen bGryvWe by mulegoat (@mulegoat) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted November 23, 2021 Share Posted November 23, 2021 Thanks for popping in with some Partridge lorem ipsum. This made me laugh. 😂 Taking a look now - stand by 👀 Link to comment Share on other sites More sharing options...
Solution Cassie Posted November 23, 2021 Solution Share Posted November 23, 2021 You had reversered:true in there mate! Just a typo, all good to go. ☺️ See the Pen QWMRxGX?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
mulegoat Posted November 23, 2021 Author Share Posted November 23, 2021 Back of the net! Thank you Cassie. God I'm such a goon 1 Link to comment Share on other sites More sharing options...
Cassie Posted November 23, 2021 Share Posted November 23, 2021 1 Link to comment Share on other sites More sharing options...
mulegoat Posted November 23, 2021 Author Share Posted November 23, 2021 Client on viewing the accordion: 1 1 Link to comment Share on other sites More sharing options...
Cassie Posted November 23, 2021 Share Posted November 23, 2021 1 1 Link to comment Share on other sites More sharing options...
OSUblake Posted November 23, 2021 Share Posted November 23, 2021 Just wanted to show off how easy it is to make accordions with the Flip Plugin. See the Pen pormXeP by GreenSock (@GreenSock) on CodePen 4 1 Link to comment Share on other sites More sharing options...
PointC Posted November 23, 2021 Share Posted November 23, 2021 4 minutes ago, OSUblake said: Just wanted to show off how easy it is to make accordions with the Flip Plugin. Link to comment Share on other sites More sharing options...
GreenSock Posted November 23, 2021 Share Posted November 23, 2021 Well done, @OSUblake. Yeah, animating with the FLIP technique is like a whole different way of thinking and in many cases, it greatly simplifies things. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now