[Animating clip-path]

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.

[How to update the element being animated in TweenMax?]

Thanks Carl. That solves that issue.

[How to update the element being animated in TweenMax?]

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?

[Animating clip-path]

Thank you very much!

[Animating clip-path]

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

[How to animate only the hovered element?]

Thank You @Diaco.AW that solved my issue.

[How to animate only the hovered element?]

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()?

[:before element not animating after timeline animation]

My problem was solved by adding 

"immediateRender:true" 

to the TO element.

[:before element not animating after timeline animation]

I have a flip animation based on this codepen:

 

 
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?

See the Pen vErBdO by anon (@anon) on CodePen

[Error: "Uncaught Cannot tween a null target" when using the CssRule Plugin]

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");

[Error: "Uncaught Cannot tween a null target" when using the CssRule Plugin]

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:

 

 

I already have the before and after defined in my css with opacity:0;

 

What does the error mean?

See the Pen ibHAt by jamiejefferson (@jamiejefferson) on CodePen

[isTweening doesn't seem to be working as expected]

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!

[isTweening doesn't seem to be working as expected]

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?

[How to position two staggerTo to run at the same time?]

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

[How to position two staggerTo to run at the same time?]

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.

[How to position two staggerTo to run at the same time?]

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

[How to animate from center? (without using scale)]

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

[How to animate from center? (without using scale)]

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).

 

See the Pen IfymK by anon (@anon) on CodePen

[How to simulate css keyframes?]

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

[How to simulate css keyframes?]

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

[How to simulate css keyframes?]

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?

[Animation choppy on chrome, but not on chrome codepen?]

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

[Animation choppy on chrome, but not on chrome codepen?]

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.

[Animation choppy on chrome, but not on chrome codepen?]

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.

[Animation choppy on chrome, but not on chrome codepen?]

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.

See the Pen btKur by anon (@anon) on CodePen