Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'hover'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 66 results

  1. 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.
  2. 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
  3. 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
  4. 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?
  5. 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
  6. 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
  7. 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
  8. 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!
  9. 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.
  10. 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
  11. 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!
  12. 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
  13. What am I doing wrong here. On mouse hover it should enlarge the text hovered. On mouseleave it should scale back.
  14. a.joshi84

    Text Hover Effect

    Hello All, I am looking for the same text hover effect like below link. https://www.artistsweb.com/?fbclid=IwAR1ZFgHylvcRXuiqxcfiLOykfnX7VyQv4CssztG0TbkdW1RlxEWcZ1bMkXE Please help me out.
  15. 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 !
  16. 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:
  17. Hi, Has anybody any idea about how to get a special hover effect, a broken glass effect on image? Something like here: https://www.google.com/search?biw=1920&bih=959&tbm=isch&sa=1&ei=tMLsWuLjF6mX6ASEnaKgDw&q=image+broken+glass&oq=image+broken+glass&gs_l=psy-ab.3..0i30k1j0i8i30k1l3.6705.9787.0.15311.7.7.0.0.0.0.167.1066.0j7.7.0....0...1c.1.64.psy-ab..0.7.1062...0i13k1j0i7i30k1j0i8i7i30k1.0.jwrV-PC_YDo#imgrc=LFsqcVY9fBgtDM: Thanks!
  18. Hi First what I want to do. I have a slider with 4 pages and depending on the page I'm on, when hovering over a pre-specified element I want some text to display. This text is otherwise (when not hovering over the element) hidden. I've been thinking about ideas how to do it and thought about something and I'm wondernig whether it's possible. I give my "dots" (as seen below) <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> a css active state and then display the appropriate text depending on which "dot" is active? If that wouldn't be possible, how else could I achieve this? So far I only was able to display the text, which is otherwise hidden, when hovering over the pre-specified element. All help is appreciated! Thanks in advance!
  19. Hi all, I've been wanting to try out a new hover animation for a button. Basically, I'm wanting a generic SVG to be hidden above the button. Once you hover over it, it should animate down until it covers completely and pauses. When you hover off, it should continue to animate down until it is out of sight. My problem is that when you hover off and it animates out of sight, I can't get it to start over/repeat every time you hover over it. I've tried multiple ways to get it to work and have failed. The pen I added for this topic is the simplest/cleanest version I have. Any help is greatly appreciated!
  20. nmarketti

    SVG Button Effect

    I'm trying to create a specific button effect when you hover over it. See Image Attached Basically once you open hover on the button it opens on the right and the arrow slides out right. Is there a way to open both ends at the same time on hover for the SVG?
  21. Hector18

    Hover text rotator

    Hi, I try to create an effect like in this example but mine have some bugs on fast hover in and out. Ex: http://m2hagency.com/carprice *** Scroll to the bottom page. Any help would be appreciated. Thanks
  22. Basically, Im trying to get an animation (#dd-heading) to trigger when the user hovers over nav button(.dropdownmenu-button) that triggers dropdown with animation in it.... but it only seems to trigger the first div and the rest dont trigger. Similar to this - https://www.open-wear.com/ //gsap animation of elements in dropdown navigation var toggle=0; var tldropdown = new TimelineMax({paused:true}); var items = $('#dd-heading'); var list = $('.dropdownmenu-button'); tldropdown.staggerTo(items, 1.5, {x:20,opacity:1,delay:.5}, .5) .addPause(null,function(){ if(toggle)tldropdown.play(); } ) .staggerTo(items, 1.5, {x:20,opacity:1}, .5) function over(){ tldropdown.restart(); toggle=0; } function out(){ tldropdown.play(); toggle=1; } list.hover(over, out);
  23. Hello, i'd like to start by saying thanks for an awsome library! Now to the problem: I have a navigation menu which should display a submenu when hovering a link. This works fine but when i drag the mouse over multiple links the animation displaying the submenu continues which looks bad go ahead and try in the codepen: https://codepen.io/anon/pen/wPPrLK?editors=1111). How can i make the animation stop? I did try to set tl.clear() like this, in both the mouseenter and mouseleave functions : tl.clear() .to(".activeMenu ul", 0.25, {autoAlpha:1}) .to(".activeMenu ul li", 0.25,{autoAlpha:1, ease:Power0.easeInOut}); But then the ul remains visible. Any help is much appriciated, thank you and keep up the good work!
  24. Hey guys, My hover animation is on an infinite loop. After mutliple loops, on mouseleave, my animation will reverse all the loops. I need the timeline to reverse the loop only once before stopping. I've been using .time but I guess it is not the best method. Any help would be apreciated, thanks in advance.
  25. Alright, I'm losing my mind... I'm new to Animate CC (have worked with AE and multiple other software) and I'm trying to make nice banner ads. The thing I want is to have a button (a button as in looks, not as in technical name in Animate) scale a bit up when I hover/mouseover it. This video below learned me that the best way to do that is with a movieclip (around 12:40). I copied his code and replaced the symbol name and function name with mine. awesomest_mc.addEventListener(MouseEvent.ROLL_OVER, awesomestOver); awesomest_mc.addEventListener(MouseEvent.ROLL_OUT, awesomestOut); function awesomestOver(e:MouseEvent):void{ TweenMax.to(awesomest_mc, .8, {tint:0xCD38CD, scaleX:1.5, scaleY:1.5}) } function awesomestOut(e:MouseEvent):void{ TweenMax.to(awesomest_mc, .5, {tint:0x379bff, scaleX:1, scaleY:1}) } After a few hours (sigh) I found out that TweenMax doesn't work by default. So I found this awesome video by Greensock how to implement it with the url on this website. But it still doesn't work.. When I preview it it just shows a loading image.. Can someone.. please explain this SUPER easy (for you animation jedi's) effect....? Thank you!! Noah Smits
×