Jump to content
GreenSock

Wowzaaa

Members
  • Posts

    14
  • Joined

  • Last visited

Posts posted by Wowzaaa

  1. Quote

    The code for your path looks fine. But that's not going to visible, right? Isn't it just for the motion path?

     

    right

     

    Quote

    If so, I was suggesting to just skip that part as it's unnecessary, and you won't need to use snap. You can just grab the points for the Bezier tween doing what I described above. I can show you how if that doesn't make sense.

     

    i think i understand .... but ... i use that because i plan to just give my shape a width and height ... and get the path back ... this is the first time i work with Bezier so building them dynamically is a bit ... unknown to me :) at this point at least :)

     

    are u telling me that my roundedRect function can return directly the bezier points?

     

    thanks

  2. thanks for the info ... makes much more sense now

     

    one question though ... are u telling me that my current solution for building the path will not work?

    function roundedRect(x, y, width, height, radius) {
        return "M" + x + "," + (y + 0)
            + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + -radius
            + "h" + (width - 2 * radius)
            + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius
            + "v" + (height - 2 * radius)
            + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius
            + "h" + (2 * radius - width)
            + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + -radius
            + "z";
    }

     

    i tested this and it does what i supposed to ... but maybe u are talking about the conversion to cubic Beziers ... if my path structure is ok .. wouldn't TweenMax follow it whatever shape it might have?

     

    thanks

  3. they should keep their place at the table ... what i will need to do after i fix this .. is to

    1) make the table turn back and forth on mouse scroll

    2) make the number of people dynamic ... that is why i build the svg on the fly ... when there are 100 people ... it won't be a circle ... it will turn into an oval (or a rectangle with rounded corners with a radius of width / 2) ... so the visible part will still look like half a circle ... but the invisible part will not look like now

     

    thanks

  4. Hi

     

    So i have multiple dom elements that i animate along an svg path ... for now ... looping clockwise works ... it loops forever

    but if i call reverse() .... it acts like a rewind() ... if it repeated twice ... it will reverse only 2 times .. not forever

     

    var timeLine = new TimelineMax({
        repeat: -1,
        paused: false,
        yoyo: true
    });

     

    timeLine.add(TweenMax.to(arrPeople[i], totalTime, {
                bezier: {
                    type: "cubic",
                    autoRotate: true,
                    values: points
                },
                force3D: true,
                repeat: -1,
                yoyo: true,
                ease: Power0.easeNone,
                onUpdate: function() {
                    if (this.target == arrPeople[0] && !initialized) {
                        let children = timeLine.getChildren();
                        if (children[0].time() >= totalTime - totalTime / people.length / 2) {
                            timeLine.paused(true);
                            initialized = true;
                        }
                    }
                }
            }), (i + 1) * totalTime / people.length);

     

    this is the code i use to create the timeline and the tweens

     

    any sugestions? :(

     

    thanks

×