Jump to content
Search Community

My Code Repeating same animation 100 of time

Tauseef test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

 

I m new to GSAP and Java scripting , for one of my project i m trying to create some animation a simple Circle which progressively completed

 

I m using RephaelJs for Cricle Path and TweenMax to animate path , however i have no idea what i m doing wrong when i preview code its repeat every step of that circle , can someone please guide me

 

 

See the Pen JBCuz by tasaeed (@tasaeed) on CodePen

 

 

 

 

Regards

 

Tauseef Ahmed

Link to comment
Share on other sites

Hi Tauseef and welcome to the GreenSock forums.

 

First, thanks posting the codepen it was super helpfull!!

 

The issue in your code is that in the drawCircle you're adding a Raphael paper each time the function gets executed, so if during the tween the onUpdate callback gets called 300 times, the code will add 300 circle paths or SVG elements.

 

You have to take the the Raphael() method outside the function, since you need just one canvas, like that the circle will be drawn on the same element on each callback.

 

Also you'll notice that the circle path gets a little jagged and not smooth, this is because you'll be drawing a new circle on top of the existing one. In order to prevent that you can call the clear() method that Raphael has in order to remove the existing circle before adding a new one.

 

So your code will look like this:

var objSVG = {c:0};
// take the canvas creation outside the callback function
var archtype = Raphael("svgcanvas", 200, 200);

    function drawCircle() {
      // clear the canvas before adding a new circle
      // comment out this line in order to see the jagged circle
      archtype.clear();

      archtype.customAttributes.arc = function (xloc, yloc, value, total, R) {
        var alpha = 360 / total * value,
            a = (90 - alpha) * Math.PI / 180,
            x = xloc + R * Math.cos(a),
            y = yloc - R * Math.sin(a),
            path;
        if (total == value) {
          path = [
              ["M", xloc, yloc - R],
              ["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
          ];
        } else {
          path = [
              ["M", xloc, yloc - R],
              ["A", R, R, 0, +(alpha > 180), 1, x, y]
          ];
        }
        return {
           path: path
        };
      };

      //make an arc at 50,50 with a radius of 30 that grows from 0 to 40 of 100 with a bounce
      var my_arc = archtype.path().attr({
          "stroke": "#339933",
          "stroke-width": 10,
          arc: [100, 100, objSVG.c, 100, 50]
      });

    } //end drawCircle
 
TweenLite.to(objSVG, 5, {c:100, ease:Power0.Linear, onUpdate:drawCircle});

You can see it working here:

 

See the Pen KqIdk by rhernando (@rhernando) on CodePen

 

Rodrigo.

Link to comment
Share on other sites

Now another question in sequence of above Pen 
 
How to fill color if i want to fill that circle once completed ?
 
I m using 
 

tl.to(my_arc, 2, {raphael:{fill:"#339933"}, ease:Power0.Linear, onUpdate:drawCircle}, "+=1.0");
 

But in Console i m seeing error TweenMax unable to access my_arc
 
 
 
Regards
 
Tauseef Ahmed

Link to comment
Share on other sites

Hi Tauseef,

 

The best option is use an onComplete callback:

 

 

TweenLite.to(objSVG, 5, {c:100, ease:Power0.Linear, onUpdate:drawCircle, onComplete:fillCircle, onCompleteParams:[my_arc]});

function fillCircle(target)
{
  TweenLite.to(target, 2, {raphael:{fill:"#339933"}, ease:Power0.Linear, delay:1});
}
Just keep the callback function outside the drawCircle function.

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Hi Tauseef,

 

There's an issue that I can't get while using fill in this particular sample. Also another issue is the fact that my_arc is a private variable, therefore it can't be accessed outside the drawCircle function. In order to solve that you have to create the variable as a public one but define it inside the drawCricle function.

 

Also in order to tween the fill you'll have to create a new element with a value 0 inside the SVG object and tween that value to 1. Then using an onUpdate callback you can pass that value to he fill-opacity attribute.

 

You can see it here:

 

See the Pen KqIdk by rhernando (@rhernando) on CodePen

 

Rodrigo.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...