timelinemax infinite animation stops looping on reverse

[Wowzaaa 0 Likes (Newbie)]

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

[OSUblake 9,990 Likes (Superhero)]

5 hours ago, Wowzaaa said:

any sugestions?

 

A demo would help. It's very hard to troubleshoot an animation without seeing it. 

 

[Wowzaaa 0 Likes (Newbie)]

hey

 

here is the dev link

 

http://pipple.foove.nl

 

the code is in here:

http://pipple.foove.nl/assets/js/main.js

 

thanks

[OSUblake 9,990 Likes (Superhero)]

Hi @Wowzaaa

 

I must say, I'm even more confused now. I see a bunch of SVG related stuff in your code, and references to different SVG libraries like d3 and snap, but it doesn't look like you're using any SVGs.

 

I also don't see the issue you described above. I see a bunch of people spin around a desk, and then it stops. No reverse or looping behavior is happening and I don't see any controls or buttons that work.

 

I guess a better question would be what are you trying to do? To do that rotation animation, you certainly don't need to use a Bezier,  or create a custom path only to have another library parse it so you can convert it to an array of points.

 

I can think of a bunch of different ways to do that rotation and that staggered fanning out behavior, but I'm really not sure what the issue and the desired outcome are. Can you describe in more detail some of these things?

 

[Wowzaaa 0 Likes (Newbie)]

took me a while but i hope this helps

 

See the Pen VMvYwa by rarutu (@rarutu) on CodePen

 

thanks again

 

[OSUblake 9,990 Likes (Superhero)]

Thanks. Now I see what you're talking about.

 

Quick question, once all the people spread out around the circle, do they ever go back to their starting position? If not, I think this could be simplified a lot.

[Wowzaaa 0 Likes (Newbie)]

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

[OSUblake 9,990 Likes (Superhero)]

Ah, ok. What I was thinking about will only work for a circle, so scratch that. I'll just rework your timeline. In the meantime, here's some info about creating cubic Beziers. Converting a rounded rectangle to cubic Beziers isn't too hard.

 

For lines, you set the first control point at 1/3 the distance, the second control point at 2/3 the distance, and the anchors are of course at the ends. So if you had a horizontal line that was 30px long, the points would be at 0, 10, 20, and 30.

 

For an arc, multiply this number by the radii to get the distances of the control points.

var kappa = 0.551915024494;

 

See the Pen oZxobX by osublake (@osublake) on CodePen

 

 

[Wowzaaa 0 Likes (Newbie)]

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

[OSUblake 9,990 Likes (Superhero)]

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

 

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.

 

[Wowzaaa 0 Likes (Newbie)]

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

[OSUblake 9,990 Likes (Superhero)]

Yeah, working with Beziers can take some time getting used to. I'll set that function up for you, so all you will have to do is pass in your rounded rect params, and it will return the Bezier object for the tween.

[Wowzaaa 0 Likes (Newbie)]

simply awesome .. thanks man

[Wowzaaa 0 Likes (Newbie)]

so can u at least give me a suggestion on how to fix my original issue? the one with reverse?

 

thanks

[OSUblake 9,990 Likes (Superhero)]

Hi @Wowzaaa

 

Sorry for not getting back to you. I reworked your demo, but had to leave before I got a chance to post it. I'll show you it when I get back home in a couple hours.

 

[Wowzaaa 0 Likes (Newbie)]

much appreciated

 

do u also have a suggestion for using the mouse wheel to rotate the people back and forth around the table?

 

thanks

[OSUblake 9,990 Likes (Superhero)]

Yeah. You can use the delta value from wheel event to change the progress of the animation. Shouldn't be too hard to implement. I'll take a look at the get when I get back home.

[Wowzaaa 0 Likes (Newbie)]

i saw some examples online but all use jQuery's scrollTop();

 

my specific case is that body has overflow hidden ... so the is no actual scroll for the page

[Wowzaaa 0 Likes (Newbie)]

so can anyone point me in the right direction? i do not need the whole solution ... i just need to understand what am i doing wrong ... what am i missing?

[Wowzaaa 0 Likes (Newbie)]

anyone?

[Dipscom 2,815 Likes (Superhero)]

He'll get back to you @Wowzaaa - He's probably busy with something else.

[Wowzaaa 0 Likes (Newbie)]

i'm sure he would answer me if he could but i was hopping there was someone else that can show me the error of my ways

[Wowzaaa 0 Likes (Newbie)]

solved it ... nevermind

[OSUblake 9,990 Likes (Superhero)]

I said I would help you out, but had other priorities to take care of first. 

 

If you got it working, then great. You can close your issue on Github too.

 

I was going to recommend a different approach once I realized you were trying to make it work like a conveyor belt. Having 100, DOM based animations running at the same time with a linear ease is not a good idea. If there's a framerate drop, it's going to be painfully obvious. Something that might contribute to a framerate drop is the fact that at least 50% those animations will be out of view, making it very inefficient.

 

I was going to suggest what I originally had in mind, position everything around a large div, and spin that div so there is only 1 animation, similar to this demo. It's also draggable, which means it will work with mobile.

 

See the Pen 29253684247d93ede44c84e2cf3c3e3f?editors=0110 by osublake (@osublake) on CodePen

 

 

You can simulate the conveyor belt effect by placing all your characters on the div, and toggling their visibility. It wouldn't be to hard to figure out which characters should be visible based based on the rotation of the div. 

 

 

[OSUblake 9,990 Likes (Superhero)]

And in case anybody else needs help with looping part of a timeline, you can isolate the loop in another animation.

 

var someAnimation = new TimelineMax({ repeat: 1 })
  ...

var loopAnimation = new TimelineMax({ repeat: -1 })
  .add(someAnimation.tweenFromTo(timeAfterOneLoop, timeAfterOneLoop + durationOfLoop))

 

I do the same thing in this demo.

 

See the Pen YrXdGZ by osublake (@osublake) on CodePen