Search the Community
Showing results for tags 'rollover'.
Found 8 results
-
My goal is to get the yellow arrows, after they are done with their initial timeline, to react to mouseenter and mouseleave. When I try to set AddEventListeners nothing works and if I comment them out, only the first timeline runs. I am pretty sure that I need to call the 2nd timeline from a function when the first timeline runs but that's a different thing. When I comment out the 1st timeline the 2nd timeline runs no problem. But if I uncomment everything out nothing works. Am I even approaching this in the right way? I should be able to run a timeline on a mouseEvent yeah? I've taken @carl advice and have tried to make the codepPen as stripped down as I could. Let me know if that's' still too much or not enough. TIA, Diza
-
Hi, I created a simple roll-over effect for multiple elements on a webpage: portfolioVak1 = $("#portfolio-vak1"); // Rollover Tweens portfolio portfolioTween.to('#portfolio-titel1', 0.3, {y: "-=20px", delay: 0.1}).to('#portfolio-bekijk1', 0.3, {y: "-=43px", delay: 0.1}, '-=0.3'); portfolioVak1.mouseenter(function(){ portfolioTween.play(); }); portfolioVak1.mouseleave(function(){ portfolioTween.reverse(); }); This works perfectly! But now I want this exact same effect to happen on 30 elements on the same page. Off course, the most clean way to do this would be to create a loop, but unfortunately I don't have the knowledge to make a loop happen in this situation. So the code needs to work on 'portfolioVak2', 'portfolioVak3' ...... 'portfolioVak30'. The tweened elements will also change: '#portfolio-titel2', '#portfolio-titel3' etc. and '#portfolio-bekijk2', '#portfolio-bekijk3' etc. Thanks for your help, Roelof
-
Hey guys, i'm trying to do something simple and that i've done before in a similar way, but for some reason it's not working on this project. I'm not sure where am i getting the syntax wrong. I just want to have a timeline to animate the rollover state for the button. Basically i'm going to have an animation for the <a> itself and another one for the span that is inside the <a>. does anybody see the error? http://codepen.io/anon/pen/gAolh Cheers, Thales
-
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
-
Hey guys. Two things I'm trying to accomplish with a navigation bar. First I want it to fade up on page load. Secondly, I'm looking for opacity tweens on rollovers. First part I have working, as evidenced here - http://grokhaus.com/navTest/navTest01.html Second part I isolated for testing purposes before combining the two, and this functionality is not working for me (code provided by Carl in a separate post yesterday) - http://grokhaus.com/navTest/navTest02.html On combining the two: would something like this work? <script> window.onload = function() { var video = document.getElementById("video"); var faq = document.getElementById("faq"); var about = document.getElementById("about"); var contact = document.getElementById("contact"); TweenMax.fromTo([video,faq,about,contact], 1.5, {autoAlpha:0}, {autoAlpha:.2, delay:1}); TweenMax.fromTo(home, 1.5, {autoAlpha:0}, {autoAlpha:1, delay:1, onComplete: activateRollover}); } function activateRollover() { video.onmouseover = function() { TweenMax.to(video, 0.2, {opacity:1}); } video.onmouseout = function() { TweenMax.to(video, 0.2, {opacity:0.2}); } } </script> Any help here is greatly appreciated.
-
Moving from AS3 to JS - how can I recreate this functionality (as accomplished in AS3) with GSAP? (Button is an image). btn.addEventListener(MouseEvent.MOUSE_OVER, over); btn.addEventListener(MouseEvent.MOUSE_OUT, out); function over(e:MouseEvent):void { TweenLite.to(btn, 1, {alpha: 1}); } function out(e:MouseEvent):void { TweenLite.to(btn, 1, {alpha: .6}); } Thanks guys
-
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
-
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!
(Small)(1).thumb.jpeg.15e42ae49445b8bada9d0a027e685017.jpeg)
