Lvl beginner : Animate only the card hovered on a grid

[JoffreyPersia]

Hi guys, 

I am struggeling with a small problem I guess. 

I would like to animate a card when the mouse hover it, but on my gsap code, I animate all the cards at once. 
I tried to get the ID but I wouldn't succeded it. 

Have you an idea ? 

Thank you

See the Pen PoKVBWj by pixelmort27 (@pixelmort27) on CodePen

[akapowl]

Hello @JoffreyPersia

 

This is more a logic thing, than related to GSAP.

 

Instead of targetting all wrappers when creating your timeline, like you do now, you will have to create a timeline for each of those wrappers, simplest in a loop and when looping over them, target each specific wrapper and its respective paragraph only (also when it comes to the events-handling) - since you are using jQuery, that could maybe look something like this then

 

See the Pen 4c9d85a24497b277537c05d4ec246b9d by akapowl (@akapowl) on CodePen

 

[JoffreyPersia]

Thank you so much. 

I am learning a lot thanks to you.

[JoffreyPersia]

@akapowl, I tried to replicate it in my website. 
I succeded to trigger correctly the animation. 
But I am facing a case that I couldn't trigger correctly
https://www.studio-artifex.fr/les-artifex/
When the mouse hover a card, the animation triggers correctly.
When I click on a card, the animation is finished, so it is good, it stays.
When the mouse leave, if the card has the class Expended, the animation stays and doesn't reverse. It is good.
If I click on an other card, I would like to reverse the animation of the card previously clicked. 

With the each function, I don't know how I can manage it. Have you an idea ? 
Is there a way to trigger a function when the element loose a class ? 

Thank you

 

contentWrapper = jQuery(".sa_card__contentContainer");

contentWrapper.each(function() {

  const thisContainer = jQuery(this);
  const thisNames = thisContainer.find('.sa_card__namesContainer div');
  var someoneElseIsActive = false;
	
  const timelineHover = gsap.timeline({
    defaults: {
      ease: "power2",
      duration: 0.3,
    },
    paused: true,
  })

  timelineHover.to(thisContainer, {opacity:1});
  timelineHover.from(thisNames, {y: 30, stagger:0.1, opacity:0}, "-=0.2")
  
  thisContainer
	  .on('mouseover', function(){ timelineHover.play() })
	  .on('mouseout', function(){
	  
	  	if( jQuery(this).parents(".sa_card__all").hasClass("expended")) {
      	
	  } else {
		  
      	timelineHover.reverse()
		  
	  }
  });

});

 

[akapowl]

 

This too is more of a logic question and these forums generally try to stay focussed on GSAP specific questions.

 

What you could do, is scope the variables to each of the wrappers so you can access them from outside ( not sure if the terminology is right but I hope it makes some sense at least ). I'm working with adding a class to the clicked wrapper here ( which could also be replaced by the use of a variable instead ), on click check if any of the wrappers has that class and if it has, reverse its timeline. Not sure if it is 100% correct or the best way to go, but it works.

 

See the Pen a7688626fe22789f11a8af111f96f9e3 by akapowl (@akapowl) on CodePen

[JoffreyPersia]

Thank you so much, it helps me a lot