Jump to content
Search Community

GSAP accordion expanding issue

DD77 test
Moderator Tag

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

Hi All, 
I'd like to add a class to accordion-group so I can make the height to 100%.
Currently I have 4 accordion groups that have a height: calc( 100% / 4), like this they get the height of the page. Unfortunately I can get the click even to add the extended class.  className: '+=expanded' 

Not entirely sure is the best approach. Would be lovely do get some directions.
 

See the Pen rEojde by davide77 (@davide77) on CodePen

Link to comment
Share on other sites

Yep! I had to change your CSS to make the expanded class have height:100% but besides that I got ya.

 

All it takes is just TweenLite.to(content, 1, {className: "+=expanded"}); but this isn't the recommended way because animating between classes is intensive (under the hood GSAP has to check for differences in every property in order to know which ones to animate).

 

We recommend telling GSAP explicitly what you want to animate between instead. Both examples in the demo below:

 

See the Pen KOKRBX?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 3
Link to comment
Share on other sites

Sounds a bit more complex. I would suggest you look into flexbox and try animating them yourself. Blake, another user on these forums, created this helpful demo to show how you can animate flex elements. 

 

Why don't you try putting together another demo that animates it using flexbox and trying to keep it simple like the demo I provided above?

 

See the Pen dMLQJr by osublake (@osublake) on CodePen

  • Like 3
Link to comment
Share on other sites

It's also helpful to use the forum search feature as there have been numerous accordion threads. Here are a couple.

If that search doesn't get you what you need, you can always fire up the Google machine and search: site:greensock.com accordion

 

  • Like 2
Link to comment
Share on other sites

You get that error since .head does not exist in the DOM, and outputs null.

 

var menu = element.querySelector(".head"); // does not exist and outputs null

 

Check your HTML markup and make sure all the elements your targeting with GSAP exist in the DOM (HTML/SVG) before you try and animate them.

 

:)

  • Like 4
Link to comment
Share on other sites

@Jonathan

I managed to achieve what I need it.  I'm still have to some one important part of this task.

Basically, on click, the clicked element should move to the top, so like this the user could always scroll down to click the others.

         

onComplete: function() { 
	if ($(element).length){
		$("#menu").prepend($(element))
	} 
}


this code moves the element to the top. 

Now I need a tell the others to re-order the height and the top position. Could anyone help me please? 
 

See the Pen aevWYQ by davide77 (@davide77) on CodePen

Link to comment
Share on other sites

@DD77 That's not a trivial task. I'd recommend changing your approach completely if that's what you need to do. I'd recommend that you position all of your elements absolutely and position them using JS if you need to do that. It would make animating them properly a lot more easy. As is you'll have a lot of trouble adjusting your current setup to have that behavior. 

  • Like 2
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...