Pencil animation (or line animation)

Share your Work
7

You can always use a mutation observer to track a line progress and add the hand to it…
lineObserver.hype.zip (18,3 KB)

On the SVG Filter effects there is the disclaimer that Safari isn't playing nice with many of them, so I discontinued the updates on them (for now).

4 Likes
8

Wow, that's a great solution @MaxZieb! I've made a note of your technique for possibly binding in the future.

1 Like
9

Yes, Max, it's a shame that Safari is so "behind" in web graphics. Anyway the feature you created is a great tool for video output, for example.

Thank you very much for your great creative work. For those of us who don't know how to program, it's pure gold.

I will also try the line tracking :wink:

10

@jonathan, One question: Why can't I create an automatic animation of a dashed line? :thinking:

The only way I've found to do it is to draw a white dashed line and use it as a mask. I have duplicated it underneath with another line colour and I have activated the animation of this black line that is hidden intermittently under the white mask.

The trick works on a white background but as soon as it is superimposed on a coloured area, you can see the trick. Would there be another way to do it?

11

I have tested the two contributions you have made.

I added a hand with a pencil and the rest of the arm up to the elbow. The shading is done directly with Hype and it's perfect this way because you can adjust the shade as needed.

I had to correct the position of the "lineObserver" in its x and y coordinates to fit the pencil tip.It was a bit difficult to find where because I don't have much idea of programming, but I do know that you have to add or subtract pixels, or points, to the default coordinates to make that correction.
The concrete correction was (In lines 16 and 17 of the code):
hypeDocument.setElementProperty(handElm, 'top', offsetTop + pt.y -65);
hypeDocument.setElementProperty(handElm, 'left', offsetLeft + pt.x +55);

3 Likes
12

I did a Forum search & this Demo of an animated dashed line by @h_classen showed up - note his answer in this post which references another link:

I have attached that referenced file here: apollo8_animatedDash.hype.zip (609.4 KB)

Also some other useful info in both threads.

2 Likes
13

First: That looks great already!

  • you can use invisible lines to reposition the hand if the offset between two lines creates a big jump OR even easier you can just animate the hand as you want. As long as there is no marked line progressing the hand is free to be animated with Hype.
  • the object positioned by the lineObserver can be anything … so you could just have it position a group (1) and inside the group the hand image (2) can be moved around until the pencil point is aligned with the group corner. That way you don't have to adjust x and y for the pen.

CleanShot 2020-09-04 at 01.41.26@2x
CleanShot 2020-09-04 at 01.41.26@2x1080×558 160 KB

2 Likes
14

Thank you very much for your response.
My fault for not looking in the forum (tiredness makes me lazy) :sweat:

1 Like
15

Thanks Max, I hadn't thought about it. Great solution! (both)

1 Like
16

Your welcome.

CleanShot 2020-09-04 at 02.20.41
CleanShot 2020-09-04 at 02.20.411342×592 1010 KB

Another trick comes to mind:

  • You can make the hand and pen a symbol and then use symbol actions from the main timeline to run any symbol timeline using symbol actions. That way the hand can have a set of reusable "gestures" or "actions" that can be added to any motion without having to repeat the animation work.
2 Likes
17

This approach was to reveal a dotted path ...

1 Like
18

That looks great. :+1:
This way you can give the arm some naturalness, at least support and lift the pencil tip from the paper. That's enough to make a more dynamic global animation

19

It is absolutely stunning. :open_mouth:
It can give a very interesting creative game.

The timer is a blast :heart_eyes: :exploding_head:

Thank you very much for your contribution.

1 Like
20

The technical reason is that the line draw and line dash use the same property under the hood. My recollection is that the solutions that were developed in the forums would likely be the way forward to allowing both in Hype for a future release :slight_smile:.

I'm glad to see everyone contributing on here - looks like with all these techniques combined a hand drawn pencil animation look has come together!

2 Likes
21

Thank you for the technical explanation. Now I understand it better.

22

With all that I have learned here I have made an animation with Hype for the header of some videos that I am working on.

Logo_Animado-720


I have also taken the opportunity to test the buttons. I have put one of "Repaly" but it gives a failure: the pencil line effect is lost with the "Replay", although it works if you reload the page.

En enlace está aquí:
https://artesaeta.com/Animation/Logo_Animado.html

5 Likes
23

I have been doing tests and only "reload" the pencil style if the button action is "Go to Url (same web address)" reloading the page, instead of "Jump to the Scene1". But I don't know if that's right.

24

That looks great!

Any chance you would be willing to share a zip of this .hype document? I think that would be the easiest route to investigate why the filter effect for the pencil isn't showing up.

1 Like
25

Yes. Here it is @jonathan . It's my first job with Hype so there may be a few bugs. The animation is entirely handmade.

Many thanks for the help

26

Looking great! Basically, the enabler creates SVGs with effect definitions and a unique id for each of the pencils. Currently, I am not checking if the enabler already did that job and it reruns. I guess that would be the source of the problem. You can fix it if you add the enabler to a first scene you never revisit. But the pencils (and the enabler) do need some love and some refactoring. I am currently investigating patterns and in that go… maybe I'll see to it that pencils are also "cleaned" up and extracted into a CDN file rather than being rendered as an "enabler" (in a rectangle) on stage…

2 Likes