gimperdaniel

I just noticed that the codepen posted Diaco.W does not work in Firefox. It seems that firefox only supports the url() method of clip-path.

Thanks Carl. That solves that issue.

Here's my tween: TweenMax.to($(".myel.active .fact"),2,{y:"-=10",opacity:0,repeat:10,onComplete:nextFact}); nextFact is a function that determines the next element. So it pretty much removes .active class from one child and then assigns it to the next. However after the first run, nextFact updates the .active class, but TweenMax is still looking at the old element, and it keeps animating the old element, not the new child with a .active class. So... how do I tell TweenMax that .myel.active has changed?

Thank you very much!

can you explain how your answer works? I am a bit confused.

Thank You @Diaco.AW that solved my issue.

I am probably approaching this the wrong way: I have a simple, timeline that I would like to play forward on mouseenter, and then in reverse on mouseout. var photo_zoom = new TimelineMax({paused:true}); photo_zoom.to(WHAT GOES HERE??,1, {scale:1.2}); $(".each-photo").hover(function(){ photo_zoom.play(); },function(){ photo_zoom.reverse(); }); Assuming that there's more than one element with class .each-photo, how do I pass the hovered element, to the timeline? Do I need to wrap whole timeline inside a function? Is there a way to pass parameters via play() and reverse()?

My problem was solved by adding "immediateRender:true" to the TO element.

I have a flip animation based on this codepen: http://codepen.io/anon/pen/vErBdO The flipping animation by itself works perfectly. However my "cards" have a :before and :after element. I noticed that sometimes the before and after element don't flip if the whole flipping animation inside a timeline. Code: CSSPlugin.defaultTransformPerspective = 1000; TweenMax.set($(".flipper .back"), {rotationY:-180}); $.each($(".flipper"), function(i,element) { var tl = new TimelineMax({paused:true}); tl.to($(this).children(".front"), 1, {rotationY:180}); tl.to($(this).children(".back"), 1, {rotationY:0},0); element.animation = tl; }); function flipit(){ $(".flipper").hover(elOver, elOut); function elOver() { this.animation.play(); } function elOut() { this.animation.reverse(); } } //Show cards var timeline_tl = TweenMax.staggerFromTo($(".flip-container"),.7, {y:-80, opacity:0}, {y:0, opacity:1, onComplete:flipit},.2); It almost seems that the :before and :after were not picked up by the animation in time. Any ideas?

Never mind. I figured it out. I had my css defined as #myID.connector:after{} And I was trying to select just .connector:after{} It looks like that the CSSRulePlugin selection must have the exact same selector structure. So this works: CSSRulePlugin.getRule("#myID.connector:after");

Here's my code: var connectors_tl = new TimelineMax({repeat:-1,onRepeat:change_position}); var connector_before = CSSRulePlugin.getRule(".connector:before"); var connector_after = CSSRulePlugin.getRule(".connector:after"); connectors_tl.add(TweenMax.to(".connector",1,{opacity:1,repeat:1,repeatDelay:3, yoyo:true})); connectors_tl.add(TweenMax.to(connector_before,1,{opacity:1})); I was basing my code on the example here: http://codepen.io/jamiejefferson/pen/ibHAt I already have the before and after defined in my css with opacity:0; What does the error mean?

Thank you guys. I am going to do some good reading and try out Rodrigo's solution. I did not even consider reversing the animation. Thanks!

I am sure this is happening because I am not thinking the GSAP way... I am not there yet. I am trying to use jquery's hover with TweenMax. The animation works as expected, however if I move the mouse on and off fast, before the animation is completed, I get all sorts of weird behavior (.coords collapses, moves to the wrong spot and so on). I thought that using isTweening would fix the issue, but isTweening never returns true, even though it's obvious the animation is still going on. Maybe it's a matter of scope? $(".coords").hover(function(){ if(TweenMax.isTweening($(this)) === false){ TweenMax.to($(this),.2, {width:"+=100px",height:"+=50px",top:"-=50px",left:"-=50px",ease:Circ.easeOut}); TweenMax.to($(this).find("span"),.2, {display:"block",opacity:1,ease:Circ.easeOut}); } }, function(){ if(TweenMax.isTweening($(this)) === false){ TweenMax.to($(this).find("span"), 0, {display: "none", opacity: 0, ease: Circ.easeOut}); TweenMax.to($(this), .4, { width: "-=100px", height: "-=50px", top: "+=50px", left: "+=50px", ease: Circ.easeOut }); } }); I have also tried to unbind the hover event and then bind it back after once the animation is complete, but no luck. Any other ideas on how to approach this problem?

Thanks. I was using add, to chain everything together, but I guess I don't need it.

I noticed that you did not use "add". When is "add" necessary? Thanks for the example, that helped me to change my code and get it to work.