Jump to content

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


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

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. 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
  2. What am I doing wrong here. On mouse hover it should enlarge the text hovered. On mouseleave it should scale back.
  3. Hello All, I am looking for the same text hover effect like below link. https://www.artistsweb.com/?fbclid=IwAR1ZFgHylvcRXuiqxcfiLOykfnX7VyQv4CssztG0TbkdW1RlxEWcZ1bMkXE Please help me out.
  4. 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 !
  5. 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:
  6. 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. Thanks!
  7. 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!
  8. 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!
  9. 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?
  10. 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
  11. 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);
  12. 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!
  13. 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.
  14. 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
  15. 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
  16. HI there! I have some anchor elements that animate on hover ( image, overlay, two span texts ), all works fine, BUT, in the codepen you will notice that if you quick hover and out the elements the animation elements are not coordinated properly and the animation is not sequenced properly. Some time ago i used a solution that apply the timeline in "each" element and then the hover fires two functions, over and out, that plays and reverse the each animation, this method works perfect ( the animations remains consistent ) but i´m getting errors to implement it. This will be my definitive way to animate on hover elements independly Can anyone help me to find the solution? This is the code i have now "working": //box home is the container element $(".boxHome").hover(function(){ var imagen = $(this).find("img"); var overlay = $(this).find(".overlay"); var texto1 = $(this).find(".textoBox"); var texto2 = $(this).find(".textoBox2"); var tl = new TimelineLite(); tl.to(imagen, 2, { scale: 1.2, ease: Power4.easeOut}) .to(overlay, .4, { bottom: 0, ease:Power3.easeInOut},".3") .to(texto1, .4, { bottom: 65, autoAlpha: 1, ease:Power2.easeOut},".5") .to(texto2, .4, { bottom: 30, autoAlpha: 1, ease:Power2.easeOut},".7"); }, function(){ var imagen = $(this).find("img"); var overlay = $(this).find(".overlay"); var texto1 = $(this).find(".textoBox"); var texto2 = $(this).find(".textoBox2"); var tl = new TimelineLite(); tl.to(texto2, .4, {autoAlpha: 0, bottom: -60, ease:Power2.easeIn}) .to(texto1, .4, {autoAlpha: 0, bottom: -60, ease:Power2.easeInOut},".2") .to(overlay, .4, { bottom: "-100%", ease:Power3.easeInOut}, ".3") .to(imagen, .7, {scale: 1, ease:Power2.easeInOut},"0"); }); Thanks! Sebastián.
  17. 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
  18. 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.
  19. 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 WITHOUT reversing the previous animation completely. Again, it works for the first go, but anytime after, it doesn't perform the second and third parts and the first part gets wonky. I created a Codepen, but it didn't seem to want to work there like it does live. You can see the entire site and my menu animation at http://sushi503.com. I have tried doing a single timeline, a master timeline with child timelines and finally separate timelines, which has been the most successful. Thanks in advance!!
  20. 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 = $('.inner3'), d = $('.inner4'), e = $('.inner5'), m = 0, n = 50, o = "center", p = null; // loop through element button.each(function(i, el) { // create timeline for this element in paused state var tl = new TimelineMax({paused: true}); // My Timeline - create tween of the timeline in a variable var t = tl .set(el,{willChange:"transform"}) .set(c, {width: 200,right: 500}) .set([e, d], {opacity: 0,width: 1,right: "center" === o ? -n / 2 : -n - 20}) .set(e, {rotationZ: "45deg"}) .set(d, {rotationZ: "-45deg"}) .to(a, .2, {opacity: 0,left: 15,ease: Sine.easeIn}) .to(c, .3, {right: "center" === o ? -n / 2 : -n - 20,ease: Expo.easeOut}, .1) .to(c, .5, {width: n,ease: Expo.easeOut}, .3) .to([e, d], .2, {opacity: 1,ease: Sine.easeOut}, .35) .to(e, .3, {width: 8,ease: Quart.easeOut,transformOrigin: "100% 50%"}, .45) .to(d, .3, {width: 8,ease: Quart.easeOut,transformOrigin: "100% 50%"}, .45) // to right animation tl.addLabel("midpoint", .8), tl.add(function() { tl.stop() }, "midpoint"), tl.set(a, {left: -15}, "midpoint0.31"), tl.to([c, d, e], .3, {right: -600,ease: Expo.easeIn}, "midpoint0.31"), tl.to(a, .3, {opacity: 1,ease: Sine.easeOut}, "midpoint0.5"), tl.to(a, .3, {left: 0,ease: Sine.easeOut}, "midpoint0.5"), tl.stop(); // store the tween timeline in the javascript DOM node //el.animation = t; $(el).data('someTimeline', t); //create the event handler $(el).on("mouseenter",function(){ //this.animation.play(); null !== tl && (tl.seek(0), $(this).data('someTimeline').play()) }).on("mouseleave",function(){ //this.animation.reverse(); null !== tl && (tl.time() >= tl.getLabelTime("midpoint") ? tl.play() : tl.reverse()) }); }); })(jQuery); Thanks in advance
  21. 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 not help. I'm using Jquery in the .js file beacuse i got errors when i was using the original script which looked like this: <script language="JavaScript" type="text/javascript"> $('.tileImage').hover( function () { TweenMax.to(this, 2, {scaleX:1.1, scaleY:1.1, ease:Circ.easeOut}); }, function () { TweenMax.to(this, 2, {scaleX:1, scaleY:1, ease:Circ.easeOut}); } ); </script> Any help is much appreciated, thanks for a great tool!
  22. 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 the link. Please check out my codepen - any help gratefully received...
  23. 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
  24. 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
  25. 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