timeline Animating expanding cards with GSAP

[Syntrix 3 Likes (Newbie)]

I have solved my own problem and updated the codepen by animating the cloned tile by adding the code below. Thanks for everyone's help. 
 

 let cloneAnimation = clone.querySelector('.tile .inner-content');
            gsap.to(cloneAnimation, {
                duration: 2.0,
                opacity: 0
            })

 

See the Pen rNwgGWR by Syntrix (@Syntrix) on CodePen

[GreenSock 18,891 Likes (Superhero)]

If your question is "how do I add/remove a class at the start/end of the animation"...

gsap.to(".class", {
  ...
  onStart() {
    this.targets().forEach(el => el.classList.add("active"));
  }, 
  onComplete() {
    this.targets().forEach(el => el.classList.remove("active"));
  }
});

Does that help? 

[Syntrix 3 Likes (Newbie)]

Thanks, I have updated the codepen to make it more clear. Unfortunately your solution adds the active class to all of the tiles. I only want the active class added to the tile that is clicked whilst it is animating.

If you click a 'tile' and then click 'close' you see all 4 of tile's content fade in together when it should only be the one that is clicked. Hope that makes sense?

[nico fonseca 518 Likes (Leader)]

Hey @Syntrix ,
If you use '.tiles .child' you are affecting all tiles children of your page, but you need to target only the clicked tiles. For example:

See the Pen 1a2940a4f8186b528f3fd56344e813a8 by nicofonseca (@nicofonseca) on CodePen

 

I added this on your code and now only the content of the clicked tile will be animated 🙂

const content = tile.querySelector('.inner-content');

See the Pen 6b14dfdd6d6d63285ba927580178efa1?editors=1010 by nicofonseca (@nicofonseca) on CodePen

 

 

[Syntrix 3 Likes (Newbie)]

Hey @nico fonseca, thank you for taking the time to solve my problem, I really appreciate your help. That is exactly the outcome i was after. 👊

Sorry, i just looking closer at the code and its nearly there but not quite lol. If you export the codepen you modified and change the transition time below to 10 seconds you see what i mean

  gsap.to(clone, 0.3, style)

you'll  see the  inner-content is fading to an opacity of 0 in 0.1 second but not on the cloned tile when the transition is taking place. Is there a way to have the content fade out on the cloned tile?

tlout.to(content, {
                    duration: 0.1,
                    opacity: 0

                }, "<");

The rest is perfect!

[Cassie 5,659 Likes (Superhero)]

Hi there! I tried poking around in your demo but there's quite a lot to parse there.

You can target anything you like with GSAP though - likely just a case of adding a class of some sort to the cloned div and targeting that.

As this question's getting more into custom JS logic and isn't specifically about GSAP anymore, you may not get a detailed response. Obviously Nico, or anyone else is welcome to reply, but I'm just setting some expectations.

[OSUblake 18,538 Likes (Superhero)]

I made that demo long before the Flip Plugin came out, so I would recommend switching over to that as it can do a lot more.

 

 https://greensock.com/docs/v3/Plugins/Flip