Search the Community

Showing results for tags 'mouseover'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

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


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 9 results

  1. 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!
  2. I'm looking to reverse the TimelineMax onComplete but I can't seem to get it to work. I'm new to this library, there are probably better ways to achieve what I want here. I'll list out the goals: Auto play a tween of the blocks from left to right (working in this Codepen) On mouseover and eventually on touchover reverse the animation with reduced speed and continue to move (working in this Codepen) When the animation goes fully out of the window reverse and come back across the other way (not working) I've tried a few different ways/options but no luck so far. Any help would be appreciated.
  3. I'm hovering on a div with mousover/mouseout handlers. hoveron/hoveroff runs just fine... but.. hovering back on... forces it to stick so that hoverOff is never triggered. I feel like I've seen this before, but I can't tell where. I'd really appreciate any help on this. Many thanks in advance! Sincerely, Beau link to video handleMenuHoverOn(arg) { const {tl, refs } = this; BtnDB.btns.forEach((btn, idx) => { tl.to( refs[`dot-${btn.id}`], 0.15, { x: btn.hoverPos }, '-=0' ); tl.to( refs[`text-${btn.id}`], 0.5, { opacity: 1 }, '-=.5' ) }); } handleMenuHoverOff(arg) { const { tl, refs } = this; BtnDB.btns.forEach((btn, idx) => { tl.to( refs[`dot-${btn.id}`], 1, { x: 0 }, '1' ); tl.to( refs[`text-${btn.id}`], 0.5, { opacity: 0 }, '-=.5' ); });
  4. Noah Smits

    Simple mouseover scaling

    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
  5. Good morning, or good afternoon, or good evening… Hello guys! I'm working on a cog rotation animation for the (under development) store of my website. You can see it on the top right corner of the attached image. If I was not so perfectionist, I would have been done with it since two days… Sadly (for me), I too often —love— to fine tune things… so I would like my rotation animation to be as precise as I expect. I've made a Codepen which so far (at about 90%) shows exactly the kind of animation I would like. However, I'm quite a newbie to GSAP and I've the feeling my actual code could be way overthought. I made a bulle list to try to explain you the animation process and would much appreciate if you could tell me is there is a way to simplify / rethink it. I also miss the TODO point. Thanks in advance for your time, Cheers, Édouard.
  6. I'm still very new to flash and greensock. I came across this 3d flip effect with front content and back content. What I wish to achieve is: (1) few images with contents at the back (2) mouseover effect rather than clicking to flip the object/image (3) object will flip back to the original state on mouse leave rather than sticking with back content. AND I have tried creating the 2nd object/image, but whenever I click on any of the object, they got affected and flipped together. Truly have no idea how to edit and fix it. Your helps are much appreciated!! import com.greensock.TimelineLite; import com.greensock.TweenLite; import com.greensock.easing.*; flip1.z = 30; flip1.getChildAt(0).visible = false; flip1.getChildAt(0).rotationY = 180; flip1.addEventListener(MouseEvent.MOUSE_DOWN,cardDown); flip2.z = 30; flip2.getChildAt(0).visible = false; flip2.getChildAt(0).rotationY = 180; flip2.addEventListener(MouseEvent.MOUSE_DOWN,cardDown); function cardDown(e){ flipSelf(e.currentTarget); } function flipSelf(self){ var toRot; if(self.rotationY > 89){ toRot = 0; }else{ toRot = 180; } var timeline = new TimelineLite(); timeline.insert(TweenLite.to(self,0.5,{z:30,ease:Back.easeOut })); timeline.insert(TweenLite.to(self,1.5,{rotationY:toRot,ease:Strong.easeInOut,onUpdate:setFlipSide, onUpdateParams:[self] })); timeline.insert(TweenLite.to(self,0.5,{z:30,ease:Back.easeIn }),0.75); } function setFlipSide(self){ if(self.rotationY > 89){ flip1.getChildAt(1).visible = false; flip1.getChildAt(0).visible = true; }else{ flip1.getChildAt(0).visible = false; flip1.getChildAt(1).visible = true; } if(self.rotationY > 89){ flip2.getChildAt(1).visible = false; flip2.getChildAt(0).visible = true; }else{ flip2.getChildAt(0).visible = false; flip2.getChildAt(1).visible = true; } }
  7. acarchi

    Sliding effect on "mouseover"

    Hello everyone, I'm struggling to achieve the following sliding effect : When my mouse is over a box, I want that box to appear with a sliding effect. Right now I'm using TimelineLite, animating the "width" from 0 to 100px, as shown in the Jump start guide. The problem is I can't have the mouse over a 0px box... It works when I include this box in a div, I can now have the mouse over the div. BUT as soon as the box appears at 100px, the mouse isn't anymore over the div but over the box, resulting in an unwanted mouse out, looping the animation... Does anyone have got some suggestions to achieve this effect properly ? Thanks a lot !
  8. Hello, I would like to start and reverse a timeline animation for the element that I'm hovering with the mouse. Then on mouseleave I would like to reverse this animation. I know I could create a timeline for each possible element. However is it also possible to tell the timeline which element should be effected with the animation by passing the element ID to the timeline? Something like this: <div id="navipoint-board"> <div class="navipoints"><a href="/control/category/~category_id=MANGO"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_mango.png" id="mango"></a></div> <div class="navipoints"><a href="/control/category/~category_id=ROTEFRUECHTE"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_rotefruechte.png" id="rotefruechte"></a></div> <div class="navipoints"><a href="/control/category/~category_id=ERDBEERE"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_erdbeere.png" id="erdbeere"></a></div> <div class="navipoints"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/active_vanille.png" id="vanille"></div> <div class="navipoints"><a href="/control/category/~category_id=HAFER"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_hafer.png" id="hafer"></a></div> <div class="navipoints"><a href="/control/category/~category_id=OLIVE"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_olive.png" id="olive"></a></div> <div class="navipoints"><a href="/control/category/~category_id=PFIRSICH"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_pfirsich.png" id="pfirsich"></a></div> <div class="navipoints"><a href="/control/category/~category_id=KOKOS"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_kokos.png" id="kokos"></a></div> </div> <script type="text/javascript"> $(document).ready(function() { TweenMax.to($('.navipoints a img'), 0, {rotation:"20"}); var tlRotation = new TimelineMax({paused:true}); tlRotation.to("Mouseover-Element", 0.5, {rotation:"0"}); $('.navipoints a img').mouseenter(function() {tlRotation.play(this);}); $('.navipoints a img').mouseleave(function() {tlRotation.reverse(this);}); }); </script> Thank you very much, Robert
  9. azuki

    mouseover animation

    hi all, After a good search in this forum, I'm surprised to find that I'm the first one to ask this question... unless my search skills have gone sour... Is there a really simple way to create a mouseover animation using GSAP? I'm not super familiar with javascript/jquery so this would be my first attempt at going this route to create a rollover event. Usually, I create all of my button animations in CSS but I have a very specific animation in mind that I can't do in CSS: on mouseover, the image simply fades out - not fading back in on mouseout. Basically, I just want the img/btn/whatever to fade out with the smooth easing of Greensock on a mouseover. Any tips? Sorry if this has been asked before!