Search the Community
Showing results for tags 'each'.
-
Hey, so I've created a nice little hover effect which I apply to several buttons using .each() but for the life of me I can't work out how to kill the hover effect so that I can apply a different hover effect to it after I apply a transition to the buttons. I know this is more of a logic problem than a GSAP one, but I've used every "kill" method I know of, but for the life of me I can't work out how or where to call the code so that it kills this hover effect. I've created a very reduced example. The intention is that when you hover the red boxes, they grow and turn blue, then when you click them, they shrink and turn green. At this point the hover timeline should be killed so that I can apply an alternative hover timeline but this is where I come unstuck. On lines 47 - 50 you can see my attempts to kill the timeline. Again, I know this is a logic rather than any inherent problem with GSAP but if somebody could point me in the right direction, I'd be very grateful. Thanks.
-
Hi all, Been a while Working on a project with a fullpage menu. On that menu I've got a line under each menu link which gets triggered on hover via the following statement. Unfortunately when I click any of said links and go to another page, when you open the menu again the corresponding line from the previous page is still visible. Obviously that hover out does not trigger due to the cursor not moving off the menu element, so we have to somehow do it via click. One would think you could just check if the animation is reversed on click, if not reverse it... however no cigar as of yet. https://codepen.io/wsdesign/project/editor/XveMOR Hopefully someone can see what's going wrong! Cheers, Smallio $(".menu-link-wrap").each(function(i, element) { var tl = new TimelineMax({paused:true, reversed:true}); var menuHoverLine = $(this).find(".menu-hover-line"); tl.fromTo(menuHoverLine, 0.4, { scale:0 }, { scale:1, transformOrigin: "center", ease:Power1.easeInOut }); function toggleReverse () { if (tl.reversed() === false) { tl.reverse(); } else { console.log("already reversed") } } $(element).hover(menuLinkHover, menuLinkHover); $(element).click(toggleReverse); function menuLinkHover() { tl.reversed() ? tl.play() : tl.reverse(); } });
- 11 replies
-
- each
- reverse timeline
-
(and 1 more)
Tagged with:
-
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
-
Hey everyone, I'm stuck with ScrollMagic and SplitText. I'm using SplitText for many classes. I need to replicate the same function all over again in the same page. All the other animations are fine, except for SplitText. splitTextBody = new SplitText(".split-text-body", {type:"words"}), wordsbody = splitTextBody.words; $('section').each(function(){ var textBlock = new TimelineMax(); textBlock.add(TweenMax.to($(this).find('.underline-body'), .75, {x:0, ease:Expo.easeOut})) .add(TweenMax.staggerFrom($(this).find(wordsbody), 0.8, {opacity:0, y:"100%", ease: Expo.easeOut}, 0.012)) .add(TweenMax.staggerTo($(this).find('.underline-form'), .75, {x:0, ease:Expo.easeOut}, 0.12), '=-1'); var scene = new ScrollMagic.Scene({ triggerElement: this, duration: 0, offset: 0, }) .setTween(textBlock) .addTo(controller) }); I'm able to call SpliText with no problem when it's just one for each page. But not in this case. When I have classes like this I'm not able to figure it out. Thanks in advance for the help! Cheers.
-
I got the code snippet from rhernando last time, I've modified the code to make it respond to click instead of hover, now my problem is since each animation is created separately using Jquery each and greensock animation, how should I control all of them at once instead of controlling one only using "this.animation.play()/reverse();" http://codepen.io/vincentccw/pen/BrALe The reason is because if you look into my pen, I want all the buttons to reset to its original state before I click on a new one (that means only one button will be activated at the time.)