Search the Community
Showing results for tags 'hover'.
Found 85 results
-
If you look at the codepen example, you'll see that, once you hover out, the animation delays for about 1 second before playing the reverse animation. I also noticed that I am getting a jagged animation.
-
I'm using the greensock animation library to animate the translateZ property of an image. This is my code: $("<img />") .attr({ src: piece, class: "pieces" }) .hover(function() { tl.to($(this), 1, {transform:"translateZ(1px)"})}, function() { tl.fromTo($(this), 1, {transform: "translateZ(0px)"}) }) .load(function () { _stageElement.append($(this)); }) } But instead of stopping at 5px it flies completely off the screen. Does anyone know what's happening here and why? Also if it's important after the image flies off the screen, it comes back to its original location, but the hover property doesn't have any effect anymore. I'm not sure if this is a greensock issue or a jquery issue. Here's an example to see what I mean http://richbaird.net/3dFlip/fip.html
-
Hi there, I'm animating a few thumbnails for a website, you can check out a quick version i adapted for codepen, so you can see what i'm trying to archive. http://codepen.io/anon/pen/ABvqm What i'd like to add to this, would be an effect on the other thumbnails apart from the one that the user is hovering. For instance, you rollOver on the thumbnail 1, the thumbnail 1 gets its rollover animation alongside with the other fading out for example. I put my animation inside this function, so i'm not sure how to target the other elements. $(".thumb a").each(function(index, element){} Cheers, Thales
-
Hi, first post. Hope i haven't overlooked something obvious. I have a series of 'cards' (divs w/ front and back) that look similar to this pen: http://codepen.io/GreenSock/pen/yzahJ except the flips all happen on a timeline instead of on hover. what we want is, in the middle of the timeline (which sequentially flips 8 cards), we want to be able to have a user hover, and stop that one card from flipping, and change its opacity. right now, all 8 cards are run together on one single timeline (b/c we need tight control of timing), so i don't know if i need put them onto their own timelines or something. Any pointers or clues would be much appreciated on how i could allow the single hovered card to drop out of the timeline and change its opacity, while still allowing the other cards to keep their animation/flipping happening. Thanks! m
-
Hey there Greensock Guys, I've got a small brainteaser I could use some of your assistance with So I've got a site with a nav that is using good old CSS transitions to achive a hover effect. I've stripped it back and created a simple copy you can check here: http://webslinger.com.au/GS_hover_test/test_1/index.html So in an effort to make the animation accesible across the board (*ahemcough* for older IE browsers) I just tweaked the nav a little and used the GSAP to achieve the same thing: http://webslinger.com.au/GS_hover_test/test_2/index.html However when you move the mouse cursor from the menu header or its empty space on to an sub-menu title it's tripping the mouseout function, and there's a slight hiccup in height every time you move to a new list item. Now I know you typically run into this problem with hovers (as opposed to clicking) and I've managed to get around it for the most part, and I've tried a couple of different approaches - like putting a delay on the mouseout, so when you rollover a sub-menu title the hiccup essentially never happens - but haven't been successful. Tried to do a bit of digging and homework first, plenty on Flash/AS forums about this, but nothing I could find for JS, appreciate any input you boys can give. Cheers
-
I not sure this is the right way to do it or not, basically what I want to do is when hover over the div, the paragraph will move down and the title will turn green with class added to it. then when hover out the exact reverse will occur. My problem now is that when I hover over and out multiple times swiftly and land my cursor within the div, the mouseenter animation will not trigger, but when I move my cursor out again and move back in then it will back to normal... What seem to be the problem actually? Here is my code: http://codepen.io/vincentccw/pen/rpIgD
-
Grrrr! I'm fighting with that: var greenPulse = $("#bsBox5"); var tl4 = new TweenMax.fromTo(greenPulse, 0.7, { boxShadow: "0px 0px 0px 0px rgba(0,255,0,0.3)" }, { boxShadow: "0px 0px 20px 10px rgba(0,255,0,0.7)", repeat: -1, yoyo: true, ease: Linear.easeNone }); tl4.pause(); var tl5 = new TweenMax.to(greenPulse, 0.5, {backgroundColor:"black"}); A sample from here http://www.greensock.com/css3/ but I want to use with a mouseenter/leave action, how can I do that, when mouseleave, animation looping ends greenPulse.mouseenter(function(){ tl4.play(); }); // start looping greenPulse.mouseleave(function(){ tl4.resume({from:1,suppressEvents:false}); // HERE! how it ends in the same direction, not reverse });
-
Hello there, I have problems with my Tweens, when I'm animating them on hover like this: $(this).find("a.handler").on("mouseenter.action mouseover.action", function () { if (globals.menu_item_hover_complete) // Animate current element item_hover.timeScale(1).play(); console.log("hovered"); }).on("mouseleave.action mouseout.action", function () { // Reverse animation item_hover.timeScale(1.5).reverse(); }); These Tweens on chrome sometime lag and from opacity: 1 animates to opacity: 0.060008 (it hsould be 0) and sometimes when I'm tweening opacity:1 and top: 70, it sticks to top: 70 and just tweens opacity. What is the best way to use Tweens for hovering animations?
-
Hello everybody, My brain loops!! I create a mouseover whith Adobe Edge and TweenMax, thats not the problem, but inside this symbol there is an element which also should work with mouseover TweenMax. But it does not work well. The symbol: //mouseover TweenMax.to(sym.$("bilder"),3,{css:{y:0, scale:1}, ease:Expo.easeOut}); the element inside the symbol: //mouseover TweenMax.to(sym.$("blue02"),0.4,{css:{scale:1, opacity:0.5}}); example: http://go-motion.net/edge/men/menue.html download: http://go-motion.net/edge/men.zip Any help would be great. THX Oliver from Germany
-
Hello, How would I achieve this in the JS version? http://www.snorkl.tv/2012/02/new-custom-class-for-grow-and-colorize-effect/#more-1575 Thanks, Zach
