New Card Animation Added

[1447bits]

Button operated expandable card operation added also changed some alignments from hover card animation for better visuals

[DevKosov]

Hey i love the idea behind this animation.

Before adding it to the repository, here's some changes that would improve it.

• Adding a shrink animation to the current card when clicking the next
• Making cards responsive. Try using flexbox and set the container width to 100%, change text sizes so they are not too big for different screen sizes

Happy to help if you need

[1447bits]

Thank you sir, but actually I am struggling with the collapse animation, and it would be helpful if you can help me with that

[1447bits]

Kindly review these Updates Make it responsive ✔️ shrink card when button clicked twice✔️

[DevKosov]

Hey, I reviewed your code There are a few more point that i believe you can improve it.

Differences between id and classes

First of all when adding an animation to a div you should use animation classes instead of ids for animations. This will allow you to add multiple classes to an element. An id selector is unique in a page and can only apply to at most one element, while a class selector can apply to multiple elements.

For your example Instead of using class="card1" you could use id="card1" as card1 is unique. Where as when adding animation with javascript :

//dont do this
document.querySelector(".card1").setAttribute("id", "faded")

//but do this instead
document.getElementById('card1').classlist.add('expand')

Making the animation we want (expand and shrink)

There are multiple ways to solve this problem here's the one i would.

• First lets make two classes expand and shrink in css

  .expanded{
  width: var(--expand-width);
  height: var(--expand-height);
  transition:all 0.3s ease-in-out;
  }
  .shrinked{
  transform: scale(0.7);
  opacity: 0.3;
  overflow: hidden;
  transition:all 0.3s ease-in-out;
  }

  Imagine these classes as a state of a card => (one card will have class expanded when its open and the others will have the class shrinked).

Notice that we are using transitions in css, they provide a way to control animation speed when changing CSS properties. css_transitions

• Use data attributes on buttons to stock the id of cards

  <a onclick="click(this)" data-open="card1">...</a>
  //...
  <div id="card-1">...</div>

• Have only one JavaScript function with the button as a parameter :

  function click(button) {
  //in this function you have to get the right card to open dataset.open
  document.getElementById(button.dataset.open).classlist.add('expand');
  //remove the expand class with classlist.remove from the others and add classlist.add('shrinked');
  }

Try exploring these new ways of solving this problem. I think you will enjoy it.

As for the responsiveness and the other points they are validated.

[1447bits]

Thank You for the suggestions it really helped,

[DevKosov]

Well done. I'm merging this version, if you're willing to continue working on improving the animation please do.

Here's some improvements that could be made.

When clicking an other button the current expanded shrinks and the other button expands at the same time.

It should be easy. Also have a question on how your counter works. Why do you use it? let count = 0;

[1447bits]

I am so glad to hear you liked my work,

logic behind counter is to indicate the state of card

initially count = 0 provide next Expand action count = 1 // indicates expanded card and count = -1 // indicates normal card

initially we can also set "count = -1" it will also work but starting with "zero" makes more sense because then value will oscillate between 0 and 1

Actually i was struggling with on and off conditions of a card and came up with counter approach problem was to indicate normal card and count = -1 was the way but then 0-1 approach worked now we can remove conditions for count = -1