[Synchronization animations with Draw SVG]

Hey @mikel,

Thanks for the codepen. I looked at the code. This is enough to give me ideas on what is possible to do with Greensock. I am really happy to use it.

[Synchronization animations with Draw SVG]

Hello,

Here, I got to do what I wanted. I have made a summary of your answers. To synchronize the movement of the arrow and the drawing of the circle, I acted on the line offset 48, and the duration of each movement of the arrow.
Thanks again

 

See the Pen GRNmJoz by jmbaret (@jmbaret) on CodePen

[Synchronization animations with Draw SVG]

Thanks ZachSaucier for showing me how to simplify the code and for your suggestions.

Thanks mikel for your codepen.

As I'm new to Greensock, it helps me progress.

I will work on my problem considering your help.
I will keep you informed or ask for your help if needed

[Synchronization animations with Draw SVG]

Hello,

With a cursor, I try to animate with Drawsvg the drawing of a circle (in yellow), t2 animation, which is synchronized with the arrow (in red), line 22, which appears shortly after the start of the cursor movement.
I want the yellow circle animation to appear after the arrow, as if it were drawing the circle. I have not found a solution. Thank you for your help.

See the Pen oNYWvqQ?editors=1111 by jmbaret (@jmbaret) on CodePen

[morphing with a slider]

Thank you very much, that's what I wanted

[morphing with a slider]

Hello,
I used a Codepen to morph with a slider.
When I run the animation it starts right away. I wish it only animates with the slider but I don't see what needs to be changed.
Thank you for your help.

See the Pen poNRoRq by jmbaret (@jmbaret) on CodePen

[Animate SVG with MorphSVG]

Thank you. It is as I wanted it to be. It also allowed me to understand the use of the plugin on which I was blocking.

[Animate SVG with MorphSVG]

Here is the pen code

See the Pen OJbRQOj by jmbaret (@jmbaret) on CodePen

 

[Animate SVG with MorphSVG]

Hello,
I want to animate a line (1 in the drawing) which turns into an arc of a circle (3 in the drawing) by changing its shape and color. 
The intermediate curves show the type of deformation I want. I tried with MorphSVG, but without success. 
What approach should I have?
Thank you for your help.

[Problem with set position x with svg]

Merci Jack, merci ZachSaucier, en
effet je fais un usage particulier de Greensock. C'est une très belle librairie que j'ai adoptée après de nombreuses recherches. C'est facile à utiliser et cela m'a permis de mettre en pratique les idées que j'avais. Voici ce sur quoi je travaille actuellement. Il s'agit d'une animation qui vous permet d'apprendre à lire avec un pied à coulisse. Avec GSAP je peux positionner avec un effet de facilité ou récupérer la position du vernier ce qui me permet de faire les calculs pour vérifier l'entrée de l'élève (pas dans le codepen). Très pratique également, la facilité avec laquelle je peux gérer le zoom sur le vernier quelle que soit sa position.

See the Pen XWdNREP by jmbaret (@jmbaret) on CodePen

[Problem with set position x with svg]

Thank you so much,
I thought the value was a number.
I converted the string to a number and it works.

[Problem with set position x with svg]

Hello,
I'm trying to animate a random opening with a vernier caliper but I'm having a problem.
On the pen code when the two zeros are aligned the x position of the vernier is equal to zero.
The problem is that from time to time for a given opening greater than zero the vernier moves to the left in abutment and yet the value of the requested vernier position is greater than zero. I can't find out why and that's why I need your help. thank you.

Jean-Michel

See the Pen wvGzOwp by jmbaret (@jmbaret) on CodePen

[Probleme with draggable]

Thank's

[Probleme with draggable]

Hello,

When using draggable I run into a problem. The area available for "handle" does not correspond to the green rectangle.

Jean-Michel

See the Pen BajJVpe by jmbaret (@jmbaret) on CodePen

[SVG image magny glass effect]

Thank you all, I now have the elements to achieve what I want.

[SVG image magny glass effect]

Hello, are there any examples of a magnifying glass effect on an svg image like this example with a jpg image ?

 

 

 

See the Pen rrZVpG by Grindzior (@Grindzior) on CodePen

[Position value accuracy svg]

I solved my problem by modifying the drawing and spacing the graduations to have a snap value equal to 2

[Position value accuracy svg]

Hello,

Thank you for your response and I am responding to yours.

I designed a vernier caliper and I created a vernier drag to help learn how to read the measure (see attached Capture.png).

One of the important points in reading is to identify the two graduations which are opposite and which I wish to display in red (see attached Capture4.png).

For this I added a snap function whose value corresponds to the offset to have successive alignments.

In this case the value of the snap is 1.984375 (see attached Capture5.png).

To display the two graduations in red I make the correspondence between the position of the vernier and the graduations opposite.

This value is therefore a multiple of 1.984375 .

Have I been clear ?

Do not hesitate to ask me for more information

 

[Position value accuracy svg]

Hi
By using TweenMax with the _gsTransform.x instruction I get a precision of at least 6 digits after the 
comma but by using gsap.getProperty ("# id", "x") I only have 4 digits after the comma . 
How can I get better accuracy with gsap.getProperty?

 

Jean-Michel