Jump to content
GreenSock

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

Nested Accordion

Recommended Posts

Hi everyone, 


I have a simple nested accordion almost behaving as planned. My question is how to achieve the "slide up" animation. Because the class is set to "display:none;" I understand that I won't see the animation as written, but is there an alternative way to handle the class with GSAP to achieve the slide up animation? 

 

Any advice is greatly appreciated. 

Thanks for all! 

 

 

 

See the Pen eYWRjXx by evryali (@evryali) on CodePen

Link to comment
Share on other sites

Hi @pietM

I would probably create a timeline animation which I could play() on opening and reverse() on closing, then use an onReverseComplete callback to remove the class.

Lots of different ways to approach this but central to the issue would be not to make the elements display none until you've completed an exit animation.

Does that help?

Link to comment
Share on other sites

Here's a demo accordion. 

 

See the Pen RwVgEgZ by GreenSock (@GreenSock) on CodePen

 

Based on techniques from this thread.

 

 

 

  • Like 5
Link to comment
Share on other sites

3 hours ago, ZachSaucier said:

This came up on StackOverflow. Here's another version of Blake's pen which might be helpful for future readers:

 

Welp. I thought I gave pretty good instructions in the original thread. A little old, but still relevant.

How to toggle tweens in a DRY fashion - GSAP - GreenSock

 

Guess it's time for @Carl make some videos on it.

 

  • Like 2
Link to comment
Share on other sites

18 hours ago, OSUblake said:

Guess it's time for @Carl make some videos on it.

 

😁  I actually favorited this thread when I saw the accordion demo for "future lesson inspiration"

Truth be told, on initial study the code confused me (again).

 

animations.forEach(animate => animate(selected))

 

using map to create an array of functions and then looping through those functions passing in targets... for some reason my brain just doesn't work that way. I had to re-read your "DRY" post carefully and slowly for it to actually click. 

 

I would be more naturally inclined to build something like this closer to what @ZachSaucier provided.

 

The fact that I find the Blake approach so foreign probably means more folks would find it interesting and could benefit from it. 👍

Link to comment
Share on other sites

1 hour ago, Carl said:

The fact that I find the Blake approach so foreign probably means more folks would find it interesting and could benefit from it. 👍

 

What's foreign? map?

 

map is just a cleaner way to do some loop operations. Whatever you return will be added to a new array.

 

// for loop
let animations = [];

for (let i = 0; i < myElements.length; i++) {
  let animaiton = gsap.to(myElemnts[i], { x: 100 });
  animations.push(animation); 
}

// forEach
let animations = [];

myElements.forEach(element => {
  let animaiton = gsap.to(element, { x: 100 });
  animations.push(animation);  
});

// map
let animations = myElements.map(element => {
  let animation = gsap.to(element, { x: 100 });
  return animation;
});

// even shorter map
let animations = myElements.map(element => gsap.to(element, { x: 100 }));

 

Would have it been clearer if I added some superfluous code?

let animations = groups.map(element => createAnimation(element));

 

1 hour ago, Carl said:

an array of functions and then looping through those functions passing in targets

 

Returning a function was all that was need for the first couple of demos in that thread. In some of the later demos, I start returning an API to handle more complicated situations, like toggling even odd.

 

API? Just a fancy of way of saying a way to interact with something.

 

let myApi = {
  foo(value) {
    console.log("FOO", value);
  },
  bar(value) {
    console.log("BAR", value)
  }
};

myApi.foo("hello"); // FOO hello
myApi.bar(34); // BAR 34

 

That's why I would highly recommend playing around with game programming to anyone who wants to get good at UI. Games are really just super complicated UIs. It forces you to rethink how you approach problems, and group related operations up into an API.

 

  • Like 2
Link to comment
Share on other sites

So here's my demo unrolled. Does it make sense now?

 

See the Pen rNmYMvP by GreenSock (@GreenSock) on CodePen

 

  • Like 2
Link to comment
Share on other sites

@OSUblake Thanks for all the extra effort and explaining. I get what map() does, but don't use it often (or at all). Probably the biggest hangup is really just the concept of returning functions. It's not something I see often in "user code" around here (or other tutorial sites) although I know it's the secret sauce to many of GSAP's features and helpers.  Thanks again. I'll be sure to keep this thread handy.

  • Like 1
Link to comment
Share on other sites

It's really no different than calling a function that returns an animation. We're just customizing it.

 

let toggle = createAnimation();

toggle();

function createAnimation() {
  let animation = gsap.to(".box", { x: 200 });
  
  return function() {
    animation.reversed(!animation.reversed());
  }
}

 

Pretty much the same thing as this.

let toggle;
createAnimation();

toggle();

function createAnimation() {
  let animation = gsap.to(".box", { x: 200 });
  
  toggle = function() {
    animation.reversed(!animation.reversed());
  }
}

 

But maybe the function closure is confusing people. I know some people think that after calling a function that everything inside just gets killed off, which it doesn't.

 

We use closures all the time, like with event listeners, but we usually don't expose the callback to the outside... or do we?

 

createAnimation();

// toggles box animation 😲
box.click();

function createAnimation() {
  let animation = gsap.to(box, { x: 200 });
  
  box.addEventListener("click", () => {
    animation.reversed(!animation.reversed());
  });
}

 

See the Pen VwbrbXM by GreenSock (@GreenSock) on CodePen

 

  • Like 2
Link to comment
Share on other sites

stop trying to learn me stuff ;)

great demos. they help a lot.

 

  • Haha 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.

×