sammyg

Does anyone have advice on animating the svg in this codepen? https://codepen.io/samandalso/pen/bXMpWY 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: https://codepen.io/samandalso/pen/jgxqwx 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

@PointC that did the trick, thank you!

@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? https://codepen.io/samandalso/pen/NQwxzO

@PointC This was a good start, got it to this point: https://codepen.io/samandalso/pen/JgNJNX 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!

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

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

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

@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?

@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: I've integrated a lot of this with my example: 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?

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

@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); } }) });

@Carl I've gotten much closer using your example: https://codepen.io/samandalso/pen/NMPLKy 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.

@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

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!