[Animate Wave On Hover]

Does anyone have advice on animating the svg in this codepen?

 

 

Basically I want to use it as a menu hover effect where when the button is hovered, the wave animates somewhat like this sine example I found:

 

See the Pen jgxqwx by samandalso (@samandalso) on CodePen

 

I understand this svg is not really 'even' like the one in the example I found, but want to find out if this is possible or if I should go another route.

 

Thanks,

 

Sam

See the Pen bXMpWY by samandalso (@samandalso) on CodePen

[Loop problem with Split Text]

@PointC that did the trick, thank you!

[Loop problem with Split Text]

@PointC I used your code to create this, but wondering how I can reverse the animation on mouseleave without the stuttering issue. If you mouse over the links vertically quickly you will see the animations start and stop making it look jerky, what is the best method to address this?

 

See the Pen NQwxzO by samandalso (@samandalso) on CodePen

[Button Animation on Hover]

@PointC This was a good start, got it to this point:

 

See the Pen JgNJNX by samandalso (@samandalso) on CodePen

 

Wondering if I can add an effect where the circle lightly gets pulled toward where the mouse pointer is while keep the width animation, just to give it a really subtle more "organic" feel. Not sure if there is a better way to describe it. I'm not sure if this type of effect is possible, but thought I'd ask.

 

Thanks for the help!

[Button Animation on Hover]

I'm looking to create an effect, but honestly I'm not sure where to start. I'm wondering if I should create a shape with CSS and attempt to animate that or if I should make an svg of both shapes and use morph to change between the two shapes on hover.

 

 

So basically on hover the shape needs to turn from a circle into more of a pill shape and the opacity needs to change (which should be the easy part).

 

Any suggestions on the best method for accomplishing this would be appreciated!

 

Thanks,

Sam

[Text Color Change (blend-mode effect)]

@mikel Thank you! I'll look through this and see if I can adapt it to my needs.

[Text Color Change (blend-mode effect)]

@PointC, is there a way to achieve this effect more dynamically? What I mean by that, is say I have a fixed logo on a page and as the user scrolls the background colors change from section to section. So you have a white section, then a black section, then a blue section or something like that and as the background is passing through the fixed position where the logo is, the logo would "detect" what color is behind it (parts of it or all of it) and adjust accordingly, meaning on a dark bg it would reverse to white and on white back to black.

 

I've seen this done before, but I'm not sure what people use for it. I'm guessing that you can set some sort of darkness breakpoint and make a decision to go light or dark based on that.

[Trigger animation only on clicked element using class selector]

7 hours ago, Sahil said:

Easiest way would be to change your click handler to header so your map card won't listen to click event.

 

@Sahil Thank you that looks great. I was curious about how this is working.

 

So this is stopping the event from firing until you run the if condition:

 

event.stopPropagation();

 

Then you're checking if the target of the event has a class list and if the .map-card__header class is in that list and if so find the parent with the class of .map-card and make that the target of the event? Which sets the target in the button function below?

 

if (
  target.classList &&
  target.classList.contains("map-card__header") &&
  target.classList.contains("map-card__header")
) {
  target = target.closest(".map-card");
}

 

Is the second check for the header class necessary in the if condition?

 

Anything else that I might be missing?

 

[Trigger animation only on clicked element using class selector]

@Carl Hi, one more question for you if you have a chance. I've been changing up how this works a bit and found a great example here: 

 

See the Pen LmOqMp by samandalso (@samandalso) on CodePen

 

 

I've integrated a lot of this with my example:

 

See the Pen KRyJNQ by samandalso (@samandalso) on CodePen

 

Which is working pretty well. I'm having trouble figuring out how to disable the click event on the card itself and add it to the close button. Any tips or pointers?

 

[Trigger animation only on clicked element using class selector]

@Carl You rock! Thanks so much for your help! 

[Trigger animation only on clicked element using class selector]

@Carl Awesome, thanks I got it working now. One more question, I've searched around, any advice on closing other open instance when another marker is clicked? Or when the DOM is clicked, something like:

 

$(body).on('click', function() {
	$('.map-card').each(function() {
      if(this.animation.reversed()){
      }    else {
        this.animation.reverse().timeScale(1.7);
      }      
    })
});

 

[Trigger animation only on clicked element using class selector]

@Carl I've gotten much closer using your example:

 

 

Do you have any advice for detecting when the animation is reversing? tried adding in a rev variable but it doesn't look right to me and it's not working  I'd like to speed up a few of the tweens on the way out! Thanks again for the advice, it's a really fun and smooth animation library.

[Trigger animation only on clicked element using class selector]

@Carl @PointC

 

Thank you both for the advice, I'll take a closer look at the pen you posted, I was considering an each loop so that sounds like it might be the right path.

 

PointC, good points on what happens to each when the others are being interacted with or when someone clicks elsewhere on the page. All good things to consider.

 

I'll let you know how it goes.

 

-Sam

[Trigger animation only on clicked element using class selector]

Hi,

 

I'm new to GSAP, I found it on codepen when looking for an animation for a map marker. I really like using it so far, but I've run into a bit of an issue. The example I found had only one element that could be clicked on based on an id selector. I've modified it to fit my needs, but can't figure out how to have the animation fire for only the clicked element. I tried a few solutions like:

 

  var clicked;

  $c.root.on('click', function(e) {
    clicked = $(e.target).closest('.card');
    console.log(clicked);
    toggleCard(clicked);
  });

 

Which definitely picks up the element that is clicked, but I can't get the animation to then fire.

 

Any help would be appreciated, thanks!

See the Pen NMPLKy by samandalso (@samandalso) on CodePen