Jump to content
GreenSock

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

Search the Community

Showing results for tags 'hover'.

  • 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

  1. Hi Everyone! I'm new here at GSAP and I'm trying to create an interactive infographic. (final goal) For now, I want to move the right image when the mouse hovers over it. When the mouse doesn't hover over it, the image should go back to the starting position. It's a quite easy movement but for one reason the code doesn't work. Can anyone tell me what I'm doing wrong? Thanks in advance
  2. Hi All, Im trying to get 2 tweens to animate at the same time when I mouse in over a link, and to reverse the animation when I mouse out. Each tween is working correctly in isolation, they're just not workingvery well together at the same time. The 2nd time you hover, the 2nd tween just jumps between its start and end points, there is no animation at all. I tried adding the position parameter of "0" to the second tweens but it didn't solve the problem Any help appreciated
  3. Hello I have a list of items, using a stagger as it load on the page (going to use it with scroll) - this is fine. But then I am also trying to apply an animation when hovering over one item. I have it all in the CodePen. After trying a few things myself, I ended up looking at this example: For some reason, when I hover on one it still apply the animation on all list items. Not sure if I am selecting something wrong / missing something. Any ideas? Thanks in advance.
  4. I have a multi-stage menu animation that I've been tinkering on for a while now. I have finally got it to work, but it only works once all the way through and then it breaks when you try to revisit the menu a second time. For the first part, the chopsticks grab the fish on hover. If you leave the sushi menu without clicking, the animation reverses. The second part happens on click. The fish is consumed as the menu expands and the chopsticks cross to form the closing button. The third part is a second click that closes the menu and reverts the sushi menu to the initial position WITH
  5. Hi there, I am trying to make some fancy hover action on my buttons. At the moment I have two buttons side by side and the animation already works as intended. Neverthless I have the problem that once I hover one button the other button animates aswell. I would like just to animate the button, which the user hovers. Could you check my code below, which is orienated on this topic (https://greensock.com/forums/topic/13384-timelines-are-objects-or-values/) and tell me where I am wrong? (function($){ var button = $('.irp_button'), a = $('.inner1'), b = $('.inner2'), c = $('.inn
  6. Hello! I'm trying to create a simple hover effect on images in a 2 column gallery. I use drupal 8 and iv'e included the html code for one of the images in the gallery http://codepen.io/anon/pen/ZLPJQL The problem is that everything works in firefox but in chrome the animation flickers and the images goes invisible for a while before returning to normal (only on the right side of the gallery weirdly enough). Iv'e had this problem with chrome before and seen some threads on it but i can't remember what code it was that fixed the flicker problem. Iv'e tried setting force3d:true but it did n
  7. Please can anybody help - I am new to GSAP and my jquery skills require improvement. I have worked out how to create random transforms on every path of an SVG image to create a dispersed vector polygon effect. I then want to animate these vectors back to their initial state when hovering a link so that the image forms and have achieved this. What I am struggling to do is that when the page initially loads, I want the dispersed vector image to display immediately i.e. not animate to the dispersed state and only begin to animate to / from the images original state when you hover on t
  8. I'm having a few problems getting the animation to reverse back to the origianl state when the mouse is moved. Currently the code just snaps back to the icons original state.becomes a bit jumping when you have multiple aniamtions on each page. Is the away so that when the mouse is removed either the animation finishes out the sequence or is reversed back to the original state. (istead of snapping back Kind regards, Ryan
  9. Hi, I try to control two objects by hover: http://codepen.io/mikeK/pen/ZBqPdB But I can not find a way to "block" the non-active "line". Plus, if hover change is too fast, the animation of SVGs will be disturbed. Best regards from Hamburg Manfred
  10. Hi Greensock lovers, How can i achieve this (https://codepen.io/labdev/pen/amyyyw) with Greensock 2Dphysics? And as extra I want to have a cursor hover function. Basically when you hover with your cursor the "object" should be pushed somehow. Thanks. Fatih
  11. When utilizing TweenLite.to and scale in a project with <svg> graphics, I've noticed that FireFox and IE11 (not Edge and untested on <IE11) treat my container as though it were "layered". Each time the mouse hits the <svg> graphic inside the <div> it treats it as if I've left the container and minimizes the resulting scale. This causes a "jerky" effect and looks broken to a normal user. I've verified this by watching the console for when I enter and when I leave. Chrome/Edge do not exhibit this behavior and I cannot see how to "fix" this for Firefox/IE11. **The CodePen
  12. From my codepen you can see that hovering any of the parent divs results in my animation slewing across them all. In order to isolate the animation per hovered parent element I could copy paste the code using a unique ID per parent, but that seems very inefficient. Is there a way to write a main script and pass in parameters from each parent div? I'm really new to javascript logic but I could follow along if another post like this has been mentioned before. Thanks. edit: just to clarify, I'm basically wondering how I could refactor my code
  13. Hello all - I would love some help figuring out the z-index. I have everything like I want, however; the black Nike check is not moving to the front (over top of the yellow check on hover). Take a peek at my codepen, any help is much appreciated! Thank you! nick
  14. I created the following animation using css/javascript, but was told that it would be easier to achieve what I need done with Greensock. http://codepen.io/gtdesign/pen/JKGmeO I would like help in seeing if there is a way to hover over one of the circles, say for instance “Gutters” that the rotation stops and the “Gutters” circle gets larger and changes color. Can all of this be done using GSAP? Thanks for any help, Andy
  15. squxd

    SVG Hovers Cont. -

    Hey all - As you may or may not have seen my previous post, this one has a few different issues I was unsure of how to fix. I am pretty satisfied at this point. The only other things I was struggling with were... 1) When hovering over the "U" or "D" to highlight the other svg's (U-X-D) blue. I was using the ':not' some in $(".blue-uxd:not(#diamond)").hover(function(){ joinButton.hide(); uxdButton.show(); 2) This line works but there are still some issues where the diamond does not return to a full 100% and stops mid-hover. And when animating back up it still fades quickly from
  16. squxd

    SVG Hover Animation

    1st post and it's a little rough... - I've been trying to create some hover animations on an SVG lately. Take a look at the codepen link (hover on x) to see where I'm at... My goal is to hover on the "X" and have the "A" flip/rotateY(180deg) to reveal. And when the mouse is off, have the "X" flip back. I will also mention/ask for further help having the diamond animate up and then back down relating directly to the hover of the "X". notes: - I know the "X" and "A" svg <path d=> are what is causing the width to be so far apart on rotation. This is to have the "X" in the
  17. Hi everyone, in simple words here is what I'm trying to achieve: Start an infinite animation when the user hover a div Pause the animation when the user leave, but after the animation is completed. I recreated a codepen as you can see, when I go out of the svg, the animation goes to the end but after it doesn't start anymore. ps: I tried to add play(0) but it will play once (probably because of the callback onRepeat) EDIT: while posting I had an idea and looks like it works I just remove the onRepeat callback on the mouseEnter in this way: $("svg").hover(function() { hoverDog
  18. Hi guys, Super new to js and gsap. I have two separate animations for mouseenter and mouseleave. If you hover over the target quickly (not allowing the hover to complete), the animation will not play correctly after the first hover. If you hover slowly and allow the both animations to completely finish on the first go, both animations will play correctly thereafter no matter how quickly the hover is triggered. What I'm I missing here? http://codepen.io/Aleccc/pen/KzZWqP
  19. Hi, I am trying to get the animation to play back to its original position when the cursor leaves the button. Thanks in advance.
  20. Hello everyone, I've just started learning GSAP and jQuery today with the help of ihatetomatoes and this excellent forum. I'm trying to make a hover-able floor plan map that displays information on the currently-hovered room. So far in my proof-of-concept, I have implemented this using TweenMax's hover and TextPlugin. I just have a question about implementing the rest of the map. Instead of individually making a separate function for each block, is there a more elegant way to implement an array so that when you hover over a shape, it changes hoverText to an assigned message?
  21. Hi, I am pretty new to GSAP. I may make a pretty stupid question. What I want to do is when I hover in an element, it triggers a Timeline animation. And When i hover out, it triggers another one. Problem is when the hover-in animation not finished and i hover out, the hover-out animation would have to wait the hover-in animation to finish. And if i hove in and out so many times, it will trigger so many in and out animations. What i want is when hover out, it would stop the hover-in animation and start the hover-out animation. Here is the demo code: http://codepen.io/DanielYKPa
  22. In my last post I was struggeling with getting an on click event work within an svg image. This problem is solved, but now I'm struggeling with getting a hover to work. Here is what I my code to do: When you press one of the buttons, for example $yellowbutton, all the colored blocks except for the $yellowblock will get opacity 0. $yellowblock will get opacity 1. This is the part that is allready working. Now what I want it to do is when a button is pressed and thus a certain colored block is shown, when hovered over this block it enlarges. The code I've used to get this to work is ba
  23. Hey all! I'm trying to animate some pagination elements we have on a company site redesign and am running into some scoping issues (I think). I will start by saying my JS-fu is not great so it's highly possible this isn't so much a GSAP problem as it is a jQuery problem. You can see the core HTML / SCSS here - http://codepen.io/geebru/pen/avRbzw/ And the JS I'm attempting here: // Pagination // Get pagination items function pagerAnimate(play) { console.log("pagerAnimate Activated"); var $this = $(this); var pagerIcon = $this.find('.pagination__icon'); var p
  24. Hello! I am new to GSAP but though I read the beginning documentation and watched the getting started video, my first attempt at learning GSAP is not going well. I'm not certain how to even begin with it, but going to be giving it a shot! My HTML: <div class="section"> <h3>Section 1</h3> <p>There's some text and what not in this section.</p> <div class="editMenu"> <ul class="editList"> <li><a href="#">Edit</a></li> <li><a href="#">Remove</a></li> &
  25. I am using TweenLite.to to change a path when a clipped svg is hovered. I change the cursor on mouseover event (which triggers the Tween). I would like to "reset" the cursor (to default) when the tween is done, but tween seems to be modeless, so execution follows downstream. How can I handle this? thanks
×