Search the Community
Showing results for tags 'hover'.
Found 85 results
-
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 All, I am looking for the same text hover effect like below link. https://www.artistsweb.com/?fbclid=IwAR1ZFgHylvcRXuiqxcfiLOykfnX7VyQv4CssztG0TbkdW1RlxEWcZ1bMkXE Please help me out.
-
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:
-
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!
-
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!
-
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!
-
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?
-
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
-
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);
-
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!
-
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.
-
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
-
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
-
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
-
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.
-
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!!
-
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
-
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!
