Jump to content
GreenSock

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

Animating expanding cards with GSAP

Go to solution Solved by nico fonseca,

Recommended Posts

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

Link to comment
Share on other sites

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? 

  • Like 3
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

  • Solution

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

 

 

  • Like 4
Link to comment
Share on other sites

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!

screenshot.png

  • Like 2
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

  • Syntrix changed the title to Animating expanding cards with GSAP

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.
×