Signal flowing through the circuit.

[shettyrahul8june]

These are the 3 PNGS that have been provided below.

 

 

 

 

I have attached the animation to be achieved with the above given images. Is it possible to do this with TweenMax or any other library from GreenSock as I have been asked to achieve this using greensock? Tired thinking of a solution for the same. I would be happy if anyone can provide a direction.

sample animation.zip

[Diaco]

Hi shettyrahul8june 

 

you can use SVG mask / clipping , something like this : 

See the Pen zxzaaj by MAW (@MAW) on CodePen

[shettyrahul8june]

Hi shettyrahul8june 

 

you can use SVG mask / clipping , something like this : 

See the Pen zxzaaj by MAW (@MAW) on CodePen

Thanks for this. Really grateful. Trying it on our requirement. Will get back to you if it's successful or if I need your help.

[shettyrahul8june]

Hi shettyrahul8june 

 

you can use SVG mask / clipping , something like this : 

See the Pen zxzaaj by MAW (@MAW) on CodePen

Hi Diaco,

 

I tried the below given code with/without greensock for the signal flow animation. But to no avail in Firefox.

 

HTML for the effect:

<svg class="svg-defs2" version="1.1" xmlns="http://www.w3.org/2000/svg" height="200" width="640">

<defs>

<clipPath id="clipping2">

<!--As much as you reduce the x-coordinate of start, expand exactly that

much of end-->

<path id="circle2" d='M30 190

A40 40 0 0 1 350 190

A40 40 0 0 1 30 190

z

M60 190

A10 10 0 0 1 320 190

A10 10 0 0 1 60 190

z' clip-rule='evenodd'/>

</clipPath>

</defs>

</svg>

 

<!-- SVG spongecell -->

<div class="wrapper">

<img src="http://s26.postimg.o...be2h/Black.png" height="381" width="379" alt="Black Circuit">

<div class="toBeMasked">

<svg width="381" height="379">

<image xlink:href="http://s26.postimg.o...4q8zd/pink.png" width="381" height="379" alt="Pink Circuit"/>

</svg>

</div>

 

<div class="toBeMasked2">

<svg width="381" height="379">

<image xlink:href="http://s26.postimg.o...4zaih/blue.png" width="381" height="379" alt="blue Circuit"/>

</svg>

</div>

</div>

<!-- SVG block ends here -->

 

CSS:

.wrapper {

width: 382px;

clear: both;

background: #535353;

}

 

.toBeMasked {

position: absolute;

top: 0;

}

 

.svg-defs {

position: absolute;

width: 0;

height: 0;

}

 

.bullseye {

position: absolute;

top: 0;

}

 

.svg-defs #circle {

visibility: hidden;

transform-origin: center center;

-webkit-animation: move-mask running 1.5s ease;

-moz-animation: move-mask running 1.5s ease;

-o-animation: move-mask running 1.5s ease;

animation: move-mask running 1.5s ease;

}

 

@-webkit-keyframes move-mask {

0% {

visibility: visible;

-webkit-transform: scale(0, 0);

-moz-transform: scale(0, 0);

-ms-transform: scale(0, 0);

transform: scale(0, 0);

 

}

 

100% {

-webkit-transform: scale(2, 2);

-moz-transform: scale(2, 2);

-ms-transform: scale(2, 2);

transform: scale(2, 2);

}

 

}

 

@-moz-keyframes move-mask {

0% {

visibility: visible;

-webkit-transform: scale(0, 0);

-moz-transform: scale(0, 0);

-ms-transform: scale(0, 0);

transform: scale(0, 0);

}

 

100% {

-webkit-transform: scale(2, 2);

-moz-transform: scale(2, 2);

-ms-transform: scale(2, 2);

transform: scale(2, 2);

}

}

 

@keyframes move-mask {

0% {

visibility: visible;

-webkit-transform: scale(0, 0);

-moz-transform: scale(0, 0);

-ms-transform: scale(0, 0);

transform: scale(0, 0);

}

 

100% {

-webkit-transform: scale(2, 2);

-moz-transform: scale(2, 2);

-ms-transform: scale(2, 2);

transform: scale(2, 2);

}

}

 

.toBeMasked2 {

position: absolute;

top: 0;

}

 

.svg-defs2 { position: absolute; width: 0; height: 0;}

 

.svg-defs2 #circle2 {

transform-origin: center center;

-webkit-animation: move-mask2 running 1.5s ease;

-moz-animation: move-mask2 running 1.5s ease;

-o-animation: move-mask2 running 1.5s ease;

animation: move-mask2 running 1.5s ease;

animation-delay: 1.5s;

visibility: hidden;

}

 

@-moz-keyframes move-mask2 {

0% {

visibility: visible;

-webkit-transform: scale(2, 2);

-moz-transform: scale(2, 2);

-ms-transform: scale(2, 2);

transform: scale(2, 2);

}

100% {

-webkit-transform: scale(0, 0);

-moz-transform: scale(0, 0);

-ms-transform: scale(0, 0);

transform: scale(0, 0);

}

}

 

@-webkit-keyframes move-mask2 {

0% {

visibility: visible;

-webkit-transform: scale(2, 2);

-moz-transform: scale(2, 2);

-ms-transform: scale(2, 2);

transform: scale(2, 2);

}

100% {

-webkit-transform: scale(0, 0);

-moz-transform: scale(0, 0);

-ms-transform: scale(0, 0);

transform: scale(0, 0);

}

}

 

@keyframes move-mask2 {

0% {

visibility: visible;

-webkit-transform: scale(2, 2);

-moz-transform: scale(2, 2);

-ms-transform: scale(2, 2);

transform: scale(2, 2);

}

100% {

-webkit-transform: scale(0, 0);

-moz-transform: scale(0, 0);

-ms-transform: scale(0, 0);

transform: scale(0, 0);

}

}

 

Below is the jsfiddle for the code I had written for a signal flowing effect:

http://jsfiddle.net/...8june/9dua7Lr8/

The code works fine for Google Chrome. But in mozilla it wasn't even clipping the image on localhost. Then I added the clip-path property to the style attribute of the image for clipping the path. In short I added inline styling to the image. But now the animation doesn't work on mozilla. I have used TweenMax instead of animation too. I have also used TweenMax for other effects on this Banner. All works fine on mozilla firefox except this signal flowing. But to no avail. Any help would be appreciated.

 

Can we do this purely with SVG (drawing the circuit with SVG as well as animating the circuit)? Clip path solution does not work with firefox. We are planning to create the circuit in SVG but we are unsure as to how we are supposed to show the flow of current through the circuit using SVG.

[Carl]

this technique works in FireFox: http://codepen.io/anon/pen/waKgBE

 

I have to imagine that it would be entirely possible to recreate the sample animation you provided in this fashion.

[shettyrahul8june]

this technique works in FireFox: 

See the Pen waKgBE by anon (@anon) on CodePen

 

I have to imagine that it would be entirely possible to recreate the sample animation you provided in this fashion.

 

I'll try this one and let you know the feedback. Thanks a lot for such a timely response. Implementing this on a live project.

[shettyrahul8june]

Hey guys,

 

Thanks for all your help. Here is the link to the effect I created https://jsfiddle.net/qg6orcuw/2/ . Unfortunately, couldn't figure out how to embed Greensock with JS. I know Green sock could have reduced my code alot but I was unable to figure it out. I hope it helps others and Greensock has been a great help.