Live record

[Rosario Borda]

Hello Guys,

I'm involved in searching a tool for live record a movement of a sprite in an animation, in GSAP. Like the "Live Record" feature in Core animation, described as:

 

Quote

A new way to quickly add nuanced, organic, and fluid animations in real time. Simply hit record, and then modify a property over time. Also works great for prototyping out timing for complex movements. What could potentially take countless keyframes and iterations, can now be done in a single pass in real time. This powerful tool can add unique life to your projects in a simple intuitive way.

 

Any idea?

 

Many thanks,

Rosario

[PointC]

Hi @Rosario Borda

 

Welcome to the forum.

 

GSAP doesn't have a live record system like that, but you can use the MorphSVG plugin's pathDataToBezier() method to generate a motion path for your sprite. Here's some more info:

 

https://greensock.com/morphsvg-update

 

Hopefully that helps. Happy tweening.

[OSUblake]

You could always make your own tool. Here's a really simple one in 50 lines of code using Draggable.

 

See the Pen b914826326669f88e3cdd4cb18d1b3b1?editors=0010 by osublake (@osublake) on CodePen

 

[mikel]

Hi Blake,

 

amazing, wowwwwwww  I have to do it:

 

See the Pen eEpYLW by mikeK (@mikeK) on CodePen

 

Live regards ...

Mikel

[OSUblake]

Haha! See. Not too hard.

 

Never really thought about doing that to create animations. Now I'm kind of curious how much demand there would be for a tool like that. Has anybody else been looking for something like that?

[PointC]

That is something that could be quite useful to quickly and easily create organic movements. There is a tool in After Effects that many animators forget about called Motion Sketch which does the same thing as Blake's demo.

https://helpx.adobe.com/after-effects/using/assorted-animation-tools.html

 

I use it quite often in our animated explainer videos. One of my favorite uses is simulating mouse movements on a screen. What better way to simulate a user moving a cursor on a screen than recording a user moving a cursor on a screen? For things like that, it's much faster and more realistic than drawing a motion path and trying to get the speed and easing just right.

[OSUblake]

1 hour ago, PointC said:

I use it quite often in our animated explainer videos. One of my favorite uses is simulating mouse movements on a screen. What better way to simulate a user moving a cursor on a screen than recording a user moving a cursor on a screen? For things like that, it's much faster and more realistic than drawing a motion path and trying to get the speed and easing just right.

 

Ah ha! Thanks for explaining that. I can definitely see how this would be really useful now. Adding speed to a motion path with code is definitely not practical...

See the Pen XXbLer?editors=0010 by osublake (@osublake) on CodePen

 

Can you adjust the speed of different segments after you draw it in After Effects? I'm trying to think of an easy way to implement something like that.

[PointC]

You can control the speed of segments to a degree. After you draw, you have a series of keyframes on your timeline. If you draw slowly, you can literally have a keyframe per frame of animation. Quick movements result in far fewer keyframes and manipulating the speed/duration between them is much easier. You can change the time between any of them or increase/decrease the duration of the entire animation. That's via the timeline.

 

The second thing you have after using Motion Sketch is an actual motion path with all the points that correspond to each keyframe. You can add/subtract points or manipulate the bezier handles on any point you like. It results in the same changes as manipulating the keyframes on the timeline, but is sometimes easier to make the changes visually on the actual path.

 

Ideally, you want a nice organic motion during the recording so final tweaks are kept to a minimum. It's not really designed for a massive amount of manipulation after recording. 

 

PS Your fighter jet demo is still one of my all time favorites. Great stuff.

[mikel]

Hi Blake,

 

I could imagine something e.g. for a skill test.

 

Kids have to drag an object (a little boy) through a small city scene.

In the review then small hints (popups): to fast, not stopped before

crossing the street or don`t walk on the street ...

 

Mikel

 

[mikel]

Hi,

 

I am not able to integrate a .hitTest() after the for Each (= the last position) in the pen above.

 

Thanks in advance for your help.

 

Mikel

[OSUblake]

On 7/28/2017 at 2:43 AM, mikel said:

Kids have to drag an object (a little boy) through a small city scene.

In the review then small hints (popups): to fast, not stopped before

crossing the street or don`t walk on the street ...

 

Yep. I was thinking about stuff like that. So it would be a Motion + Speed + Event path.

 

And that reminds me of this post about race cars.

 

Are you trying to do a hitTest on the very last position?

 

22 hours ago, mikel said:

I am not able to integrate a .hitTest() after the for Each (= the last position) in the pen above.

 

[mikel]

Hi Blake,

 

Yes, i tried it:  

 

See the Pen vJKzVV by mikeK (@mikeK) on CodePen

 

 

But I can not find a solution. On the last position, I would like to include tweens.

And if the hitTest combined with the last position is positive (red circle, id="hit"), another animation should start .

 

Regarding the'kids' I need some time to draft a concept.

 

Kind regards

Mikel

[OSUblake]

Do the hit test first.

See the Pen 641f665f4237568a0eb1e6b890a9c5f9?editors=0010 by osublake (@osublake) on CodePen

 

[mikel]

Hi Blake,

 

Great stuff and understandable also for me.

 

I need a little time to draw and install some new SVG elements.

See EGON - that's his name - tomorrow.

 

thank you very much

Mikel

[mikel]

Hi Blake,

 

The fun is huge:

 

See the Pen vJXNzx by mikeK (@mikeK) on CodePen

 

But, sorry, the hit animation should start after EGON has finished his LiveRecord standing on the jumpboard again.

 

I have found this code snippet, but couldn´t integrate it and so I´m not sure if that is a solution.

 

/*var response = [];
points.forEach(function(data, index) {
    data.asyncFunction(function(result) {
         response.push(result);
         if(response.length  === points.length) {
                 //foreach work done
          TweenMax.to('#theGuy',0,{scale:1})
         }
    });
});  */

 

Ohh, I'm so sick ... to much JS.

 

Best regards

Mikel

 

P.S.:  How does the trick to mention a member highlighted in BLUE (?) ?

[PointC]

Hey @mikel

 

To mention a member just start typing with  '@' and then type their user name. A list should come up and you can click that to get the blue highlight.

 

Happy tweening.

[mikel]

Hi @PointC,

 

Craig, this is just a test to practice my new skills.

 

Thanks

Mikel

[OSUblake]

Not sure where you got that function from. It looks like something for AJAX.

 

To make the hit animation play first, you can add it to the timeline before looping through the points.

See the Pen jLVbaZ?editors=1010 by osublake (@osublake) on CodePen

 

There's a lot of stuff you could do with this. You can even record when a hit happens. Drag the box in and out of the circle to see.

See the Pen 8501e4e214581a39d2158f7731c47c21 by osublake (@osublake) on CodePen

 

 

[mikel]

Hi Blake,

 

Thanks for the hints what is feasible.

 

My goal is to use the last point of the recorded record (!?) as starting point for the animation.

 

In your Live record pen (couldn`t fork it) this code could be a solution:

 

function onDragEnd() {
      
  var wasHitting = false;
  var target = this.target;
  var tl = new TimelineMax();
    
  points.forEach(function(point) {
    
    
    tl.to(target, point.duration, {
      x: point.x,
      y: point.y
    });    
  });  
  
  var hit = points.pop();
  if  (!wasHitting && hit.hitting) {
      tl.add(playAnimation);
      wasHitting = true;
    }
}

 

later on I will test this code with EGON.

 

Thanks and best regards

Mikel

[OSUblake]

You can reverse the array to start from the end.

See the Pen ayBBgj?editors=0010 by osublake (@osublake) on CodePen

 

[mikel]

Hi @OSUblake,

 

Great idea to reverse the recorded points for playing.

It's easier to understand if EGON is back from its last user point - better "UX".

 

The 'onComplete:again' jammed - now coded in line 10 and 83:

 

See the Pen KvNvmJ by mikeK (@mikeK) on CodePen

 

Thanks again

Mikel

[OSUblake]

It's because calling play is actually adding it to the timeline, so reverse won't do anything. You can just use a function to start it.

See the Pen WEodvy?editors=0010 by osublake (@osublake) on CodePen