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.

Looks like the stagger method doesn't have the "position" option. So the second staggerTo only plays after 5 seconds which is the time of the first stagger. I watched the sequence video, and it helped to understand a lot about how the timeline works. But it doesn't mention how to use two staggerTo together. var locations = new TimelineMax() .add(TweenMax.staggerTo($(".something-1"), 5, {width:100, height:100, x:"-=50", y:"-=50", opacity:0, repeat:-1}, 1)) .add(TweenMax.staggerTo($(".something-2"), 5, {width:100, height:100, x:"-=50", y:"-=50", opacity:0, repeat:-1}, 1)); To be honest, I am really struggling with the documentation on the site. Is there a place with more tutorials other than what's found on the main site? I have been using this https://www.greensock.com/asdocs/package-summary.html It helps to see all the options available, but I learn by example

@Carl - your solution is great. Much shorter and more efficient. Thank you.

My ultimate goal here is to create a ripple animation using empty divs and gsap. However I am stuck at the very beginning of it....whenever I transform an element, it transforms from top/left. I need it to transform from center. Using scss I can set: .ripples{ padding:100px; position: relative; div{ border:1px solid black; width:10px; height:10px; padding:0; position:absolute; top:0; left:0; } } JS: var rip = new TimelineMax(); rip.add(TweenMax.to($(".ripples div:eq(0)"), 2, {padding:'20px'})); I have tried the above by also adjusting the height/width. Either way, it transforms from top/left, and not from center as it was specified in the css. it only seem to work when I use "scale". However I cannot use scale because my ripples are just empty divs with a 1px border. When you use scale the border thickens. I wish the border to stay the same size. HTML: <div class="ripples"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> This was my first idea on how to create the ripple.. .animating each div using tweenmax. Maybe there's a better approach to this issue, but regardless I wish to know how to objects from center, and not from top/left. Update: I am adding a codepen to an example using scale (which is not ideal because of how the border thickens). http://codepen.io/anon/pen/IfymK

My problem was indeed the easing method I was using which was giving the impression that it wasn't a continuous animation. thanks.

Thanks guys. I will look into all the answers and see what works for me. I will get back to you soon.

With CSS 3 I am able to use keyframes, which makes animating objects really flexible. For example, with keyframes I can change a object opacity from 0 to 1 at 50% of the animation and then back to 0 at 100% of the animation... that creates a smooth fadein and fadeout. I am trying to accomplish the same with gsap. With TweenMax I can set a fromTo... but how, would I go about doing a fromTofrom? I tried doing something like this: var mydiv = new TimelineMax() .add(TweenMax.fromTo($(".mydiv"), 1, {opacity:0, scale:0}, {opacity:1, scale:1})) .add(TweenMax.fromTo($(".mydiv"), 1, {opacity:1, scale:1}, {opacity:0, scale:2})); However, when using "add", there's a very small delay between the first and the second add. How do I go about removing that delay? Or, is there another way of doing chained animations?

Yep. Thanks for the help guys. I will switch to ScrollMagic which uses depends on GSAP.

Well.. I removed everything but the gsap code and it worked without hicups. So... I guess there's some conflict with the rest of my code. Is it wise to run TweenMax.js within Jquery's document ready? UPDATE: It looks like TweenMax is not playing nice with the jquery WayPoints plugin. The good news is that I probably can do without that plugin.

I have other code (it's a full website) but I only use greensock library in this one element. As soon as I remove the animation (comment it out) there are no issues. I will get a version running of this code only in my VPS so that I can link it here, I can't have the whole site for demo. I also need to clarify that I was testing on the latest version of Chrome (Version 37.0.2062.120), on a Mac.

This is rather weird. I have the exact same animation hosted on a vps and also on codepen. When viewing on chrome, the animation is choppy and sometimes it even freezes, as if it's struggling to catch up. However when I put it on CodePen it ran just fine. I also noticed that when viewing it in my hosted VPS my laptop fans speed went up, but not on CodePen... any ideas as to what's going on? Everything runs just fin on Firefox and Safari.