Search the Community

Hello! 👋🏻 GSAP you are the best! I would be very grateful if you could help get this animation when hovering the cursor changes text and color as well as text as if inside a circle. I've been looking for a very long time for a solution but couldn't find one. Thank you very much in advance!

Hi, I'm trying to make a magnetic hover composable in Vue3, GSAP and I wanted to replicate from this Link 2 Ways to Make a Magnetic Buttons using React, GSAP, Framer Motion (olivierlarose.com) . I'm needing help how to convert it with typscript too. Here is what I have so far : import { ref, watchEffect } from 'vue' import gsap from 'gsap' export function MagneticHover({ children:any }) { const magnetic = ref(null) watchEffect(() => { const xTo = gsap.quickTo(magnetic.value.current, 'x', { duration: 1, ease: 'elastic.out(1, 0.3)' }) const yTo = gsap.quickTo(magnetic.value.current, 'y', { duration: 1, ease: 'elastic.out(1, 0.3)' }) magnetic.value.current.addEventListener('mousemove', (e) => { const { clientX, clientY } = e const { height, width, left, top } = magnetic.value.current.getBoundingClientRect() const x = clientX - (left + width / 2) const y = clientY - (top + height / 2) xTo(x) yTo(y) }) magnetic.value.current.addEventListener('mouseleave', (e) => { xTo(0) yTo(0) }) }) return () => { return children({ ref: magnetic }) } }

As you can observe in the code pen link, both the instances get triggered on interacting with any one of them. What concept am I missing? I guess this is because both button instances share the same ref. I am unsure. What is the gsap way of doing this? I read gsap context, This gsap thread, and gsap with react basics But I am still confused.

hey does anyone knows how can I do a text animation that is done in the top nav elements those On this website This

Hello All, I need help on Gsap, if you see the link of codepen theres a hover on text, I want something like on this Site on the last section https://dimitriossykovaris.netlify.app/about Hover on the mail u will see the hover Thanks,

I have an Image reveal while hovering over a text, what I want is something like on this site https://dennissnellenberg.com/ on Recent work section

Hello everyone, is it possible to implement the filling of the button on hover, from the point where the cursor came from? Let's say if from bottom to top, then the animation will go from bottom to top of the button and so on. I would be glad if someone shows the implementation at least from two sides. Thank You!

Hello All, I am looking for the same text hover effect like below link. https://www.artistsweb.com/?fbclid=IwAR1ZFgHylvcRXuiqxcfiLOykfnX7VyQv4CssztG0TbkdW1RlxEWcZ1bMkXE Please help me out.

Hey! I would like the timeline to be completed before it fires again. Now when you hover really quickly it doesn't look good at all. I'm missing something in the structure that I struggle to find out. My first thought was to find the isActive() and then do some if statements. But isActive() is returning false all the time. - How can I finish the timeline before it fires again? - Do someone know why isActive() always returning false? This is probably a rookie mistake, and, this is my first post in a forum (ever!), so let me know if I could explain/structure my post better!

Hello, Im trying to make the images dissapear, by having them on negative yPos and the transitioning them on hover back on the screen. mainly with section.addEventListener('mouseenter', createHoverReveal); section.addEventListener('mouseleave', createHoverReveal); Is there something missing in my code?

Hey there 👋 I have no real idea of what I'm doing when it comes to javascript, but I'm totally hooked on the interactions and animations that are possible when using it. And today I discovered GSAP, which seems to tie all that stuff together very nicely. So here I am asking for help, trying to implement GSAP into my most recent 'Project'. What I'm trying to do is replicate an interaction on the Wieden + Kennedy home page. The closer your cursor gets to the featured project title (lower left of the screen) the more it's underline grows. When the cursor reaches the project title, the underline reaches it's full length, and underlines the project title. I'll also point out that it doesn't matter where your cursor is hovered on that featured project title, the underline stays at it's maximum value. (Something I've been having trouble figuring out) [It's definitely easier to see this in action than to read my crappy explanation of it, so it might be worth clicking the link up there] Phewf. After piecing together sections of code from around the web, and before I discovered GSAP. This is what I had. https://codepen.io/samuelhigginson/pen/MWKBjJm It's.. kind of something that works? But there are a couple of things that aren't quite right. My line starts to get going as soon as the cursor enters the viewport. On W+K's page there seems to be some kind of 'Trigger Div' which initiates the interaction. My line only reaches 100% when the cursor is exactly in the centre of the Project Title. W+K have a much more satisfying 'Hover anywhere on the Project Title' thing going on. If the window resizes, the distances change and things go wrong. And the final difference I can spot, and what ultimately led me to GSAP. That delicious easing. My lines width is a scaled replication of the cursors distance from the Project Title. What W+K have, is a buttery smooth, slippery sliming line. And I'm all about that. So I got to googling and came across this post, here on the GreenSock forum. I noticed some similarities between the solution offered there and what I had going on, so I forked the pen and started trying to merge that solution with my own. And I ended up with this. https://codepen.io/samuelhigginson/pen/LYGgaab?editors=1111 Not great. But.. not totally disgusting? I know I've probably over complicated this massively, and my approach and calculations are probably way off. But this is all my perfectly smooth brain can manage, for now. So I'm reaching out to you people with the GreenSocks and asking for help. Anything you can suggest to get this little line dancing would be greatly appreciated. Cheers.

Hiya everyone. I am new here but really hoping someone can help me out as I would love to use this amazing library to achieve this cool effect just posted on codrops; (https://tympanus.net/codrops/2020/07/01/creating-a-menu-image-animation-on-hover/). You'll see in the article it explains that the effect works on the direction of your cursor - actually it has two effects, one for when the image is revealed/hidden and the other for moving the mouse over the nav title. I'm trying to adapt the direction based element of this effect into a Webflow project and I am struggling with this because the tutorial seems to go the long way round of achieving these effects (see the layout at the start of the tutorial) and also the fact that there are multiple JS files created. I am fairly new to js and also GSAP (love it though) so a lot of this is a bit overwhelming and also makes it very hard to achieve using Webflow but essentially I would like help with these two directional based effects on hover; 1) I just want to reveal and hide elements on hover with the direction dependent on the mouse direction 2) moving the mouse to the left rotate's the image to the left, and to the right it does the inverse. If anyone is able to offer me help I would hugely appreciate it! Thanks so much

Dear forum participants. I need your professionalism in coding. I can’t understand what is used to achieve effects such as in these examples: 1. When you click on any project from the bottom up, the rounded form of the divlock block https://jesperlandberg.dev/ 2. a very similar effect we can see when you click on the menu at https://www.chiaraluzzana.com/about 3. when you hover over any project + when you click on this project, a similar effect appears https://www.martinehrlich.com/ I hope I threw off enough examples to understand what I mean. I want to achieve a smooth distortion of the standard div block. With CSS, this smooth effect is not possible. Please tell me the script or explain how to repeat it? I also found a library with a similar menu, but I don’t quite understand whether it is or not: https://tympanus.net/Development/OffCanvasMenuEffects/bubble.html

In my codePen I have two icons with the same hover animation and it works independenly but altought I´m using the same class, I have the animation code twice in my Js. I tried to use a loop but I couldn’t make it works. There is a way to use a loop without the needing of JQuery?

I'm trying to create an effect, but i don't know where to start. Before hover text in white color, After hover into Text color will be change White to Green with animation like a slide left to right

Hey, I've seen this animation when hovering but I have no idea how to do it. Perhaps someone can help me with this please? Hover.mp4

Hi. I need some basic help with gsap.timeline() in a react environment. See my code below: import React, { useRef, useEffect } from 'react' import gsap, { TweenMax, Linear } from 'gsap'; import { ReactComponent as Twitter } from '../assets/svg/social/twitter.svg' const NavBar = () => { let twitterIcon = useRef(null); const tl = gsap.timeline() // this is the hover effect, making it glow green (all attributes are correct) const glowAnimation = (icon) => { tl.to(icon, 0.3, {attr: {style: "fill: rgb(48,223,171)"}, ease: Linear}) } // This just sets the initial colour of the black svg to white useEffect(() => { TweenMax.set(twitterIcon, {attr: {"style": "fill: rgb(255,255,255)"}}) }) return ( <div className="navbar"> <a title="Twitter" target="_blank" rel="noopener noreferrer" // onMouseEnter={ glowAnimation({twitterIcon}) } // onMouseLeave={ something? reverse of tl } href="redacted"> <Twitter // This is an SVG imported as ReactComponent className="navbar__icon" title="Twitter" ref={el => {twitterIcon = el}} /> </a> </div> ) } export default NavBar The basic premise of this is that it is part of my header. It has only one twitter icon (svg) right now. I want to be able to add more icons in the future (e.g. facebook, github) hence why I want to be able to pass in some reference to an icon into a single gsap timeline to describe the hover animation (defined as glowAnimation function) when mouse over an icon, and reverse that timeline when mouse leaves that icon. So I created a function with that timeline. But I'm unsure how to pass the twitterIcon reference (made using useRef) into the onMouseEnter attribute. What am I doing wrong? And also, what can I put in the onMouseLeave attribute to reverse the glowAnimation function? Sorry if this is stupid

Hi I'm very new to gsap and I was trying to make a hover animation for my buttons. But I would like the button to return to his start position. I tried to use clearProps, but that doesn't seem to do the trick. Hope someone can help!

Hello, I have a problem where when I hover out it repeats the animation the numbers of times it has played over the time the mouse has been on it. If I hover out before it finishes his first animation iteration, then it will go back to normal without a problem. However, if I hover it for more than 2 seconds for it complete at least 2 iterations counts, then the reverse will also repeat it 2 times before it goes back to its initial position. Basically, I want it to float continuously when I hover it, and I want it to go back down once I hover out of it. Is there a way for it to just smoothly go back to its initial position? Thank you in advance.

Hi I'm trying to achieve the underline animation on links you can see on this site https://details.ch/en (click hamburger menu icon on top right to see it). Also you can check out my attached gif where I show you the various animation cases (on mouseenter and mouseleave) I need to develop. I need to achieve the exact same interactions and animations you see. It's like I'm not able to handle the relationships between the mouseenter animation and the mouseleave animation. Someone could help me? Thanks

Hi, I'm trying to add animation on hover in my button. The animation work but I'd some issue in the element after the page scroll as you can see in this example https://codepen.io/MG_Dev/pen/VwYawbe How can apply the animation to all page elements? Thank you!

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

What am I doing wrong here. On mouse hover it should enlarge the text hovered. On mouseleave it should scale back.

Hello ! The summary : I would like to create an animation when I hover an element in a list. My codepen : https://codepen.io/anon/pen/aXBwPQ On hover on the <li>, I get the index of this and I animate the element with the same index in another <div>. My codepen works but when I hover the elements quickly, the animation is broken. I found this codepen : https://codepen.io/MAW/pen/emxWYb But this only works for elements in the items hover. How I can I do a nice animation ? Thanks a lot !

Ok. This one is killing me. I've spent two days on it already. I think I just need to know more about nested timelines and labels. But here it is: -When the mouse pointer enters the "Hover Button" I'd like the playhead to play until 50% of the animation has completed, then stop. -If the mouse pointer leaves the "Hover Button" before the playhead reaches 50%, then the playhead should reverse, heading back towards the start of the timeline. -If the mouse pointer leaves the "Hover Button" after the playhead has reached 50%, the the playhead should reverse back to the 50% position, NOT all the way back to the start of the timeline. This much so far I've got, although I used two separate timelines back to back with a number of "if" statements using the progress() method to accomplish this. I'm sure there is a more elegant solution using only one timeline, I just can't seem to find it at the moment. The problems come when the timeline reaches 100%. -After the playhead reaches 100%, I need everything to reset back to it's initial state on load. So, in other words, after the playhead reaches 100%, it should snap back to the very start of the timeline and all of the above described behavior should repeat itself all over again. This is whats giving me trouble. I have tried using pause(0), seek(0), time(0). None of those seem to be resetting things without adding extra unwanted stuff to the hover behavior. By the way, when I say timeline here I am referring to the red line on the codepen demo. Not either of the two separate back to back timelines I used to get what I've got so far. Any ideas? This one is frying my brain. Lol. Thanks for any help! Here is the codepen: