Jump to content
Search Community

Animation that simulates an EKG ...

alint test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

 

I would like to create an animation that simulates an EKG display.

 

Something similat to this:

http://www.shutterstock.com/video/clip-2638832-stock-footage-ecg-heartbeat-monitor.html?src=rel/2757719:4

 

I basically want a white dot that moves from left to right in straight line and from time to time it would go up/down a few times and continue in straight line. When the point is close to the right hand side the line will start to fade from left to right. After that the animation will start again from left.

 

I am fairly new to GSAP and I would like to ask if something like this is easy to achieve using GSAP in JS?

What GSAP elements should I use?

 

I would appreciate any help or examples that would guide me into the right direction.

 

Thank you.

 

Alin

 

 

Link to comment
Share on other sites

Hi Alin and welcome to the GreenSock forums.

 

It can be done with GSAP and SVG.

 

Please check this previous post and Carl's excellent codepen:

 

http://forums.greensock.com/topic/8510-animating-svg-paths-within-a-timeline/

 

Here's the direct link to the codepen:

 

See the Pen zLiux by GreenSock (@GreenSock) on CodePen

 

What I would do is create the path in illustrator, export it as an SVG and then create a timeline to animate the progress of the line drawing, otherwise you'll get a linear drawing without the fast spike.

 

Unfortunately I don't have time to tackle this one, hopefully the other post gives you enough information to get you started and if you have more questions keep firing.

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Hello alint..

 

Based on Rodrigo's great advice and Carl's cool SVG path animation example...  I came up with this using svg path sine wave. See if this gets you close to an EKG.

 

EKG sine wave codepen example:

See the Pen lFiBt by jonathan (@jonathan) on CodePen

 

It is just a simple sine wave path.. but I'm sure with a little elbow grease, you can modify it to emulate an EKG.

 

Does that help? :)

  • Like 1
Link to comment
Share on other sites

These are great guys! Here's a take that keeps a linear time progression like an oscilloscope would normally have. I used the width and viewBox of the SVG to perform a crop, since CSS clip is annoyingly restricted to absolutely positioned elements.

 

See the Pen axzBs by jamiejefferson (@jamiejefferson) on CodePen

 

If the SVG is absolutely positioned, all you would need is

TweenMax.fromTo(svg, 4, { clip: "rect(0, 0, 612px, 0)" },
                        { clip: "rect(0, 792px, 612px, 0)" });
Edited by jamiejefferson
codepen modified to include both methods
  • Like 3
Link to comment
Share on other sites

Thank you very much for all your answers. I really appreciate the support that I received through this forum. It is impressive.

 

The examples are very nice and they surely put me on the right track. I spent countless hours digging in the wrong direction.

 

Thank you.

Alin

Link to comment
Share on other sites

Is it possible to fade the line towards the end of the animation, so the line does not look like it is ending so suddenly.

 

Also, if I want to repeat the animation a few times, is it possible to always keep the previous line visible and the current line will look like it is overwriting it?

 

Thank you.

 

Alin

Link to comment
Share on other sites

Is it possible to fade the line towards the end of the animation, so the line does not look like it is ending so suddenly.

 

 

Hmm, that sounds pretty trick, not sure what to suggest.
 
Also, if I want to repeat the animation a few times, is it possible to always keep the previous line visible and the current line will look like it is overwriting it?

 

 

Again not the easiest thing, but if you had 2 animations of 2 lines with some clever masking, perhaps. 

 

The guys gave you a lot to work with here, unfortunately we have to spend our time focusing on matters regarding the core GSAP API. When it comes to creating advanced custom effects it can require a substantial time commitment.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...