Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
shettyrahul8june

Signal flowing through the circuit.

Recommended Posts

These are the 3 PNGS that have been provided below.

 

pink.png

 

Black.png

 

blue.png

 

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

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.
×