suzanne.soy/travis-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

animate transmission waves

Browse Source
This commit is contained in:
Lisa P 2015-10-21 18:39:54 +02:00
parent 02f986fe72
commit 1545dbd9d1
2 changed files with 31 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/styles/app/layouts/broadcasts.sass
View File

@ -18,7 +18,6 @@
border-radius: 2px
height: 0
transform-origin: center center
// transform: translateY(50%)
opacity: 0
z-index: -1
will-change: opacity
@ -55,7 +54,6 @@
border: solid 2px $cream-dark
opacity: 1
height: auto
// transform: translateY(0)
.icon-close
display: inline-block
@ -122,3 +120,22 @@
&.is-open
.tower-path
fill: #238C3E
.radio-wave--right
.tower-path
transform-origin: left center
animation: pulsating-right 1s linear infinite
.radio-wave--left
.tower-path
transform-origin: right center
animation: pulsating-left 1s linear infinite
@keyframes pulsating-right
40%
transform: translateX(20%) scale(1.1)
@keyframes pulsating-left
40%
transform: translateX(-20%) scale(1.1)

20
app/templates/components/broadcast-tower.hbs
View File

@ -2,7 +2,7 @@
{{#if isEmpty}}
<svg version="1.1" id="Layer_1" x="0px" y="0px"
viewBox="0 0 16 25" xml:space="preserve">
viewBox="-1 0 16 25" xml:space="preserve">
<g>
<path class="tower-path" d="M0.989,18.732l0.92-2.247l3.926,0.663V20h0.868l-0.001-2.852l3.926-0.663l0.92,2.247h0.989L8.167,8.078
H7.183l0.004,0.011H5.351l0.004-0.011H4.37L0,18.732H0.989z M6.702,16.288l-0.003-3.877l2.461,0.492l1.131,2.759L6.702,16.288z
@ -14,20 +14,24 @@
</svg>
{{else}}
<svg version="1.1" id="Layer_1" x="0px" y="0px"
viewBox="0 0 16 25" xml:space="preserve">
viewBox="-1 0 16 25" xml:space="preserve">
<g>
<path class="tower-path" d="M0.989,18.732l0.92-2.247l3.926,0.663V20h0.868l-0.001-2.852l3.926-0.663l0.92,2.247h0.989L8.167,8.078
H7.183l0.004,0.011H5.351l0.004-0.011H4.37L0,18.732H0.989z M6.702,16.288l-0.003-3.877l2.461,0.492l1.131,2.759L6.702,16.288z
M2.246,15.662l1.131-2.759l2.459-0.492l-0.001,3.877L2.246,15.662z M8.794,12.015l-2.095-0.483L6.698,8.92h0.827L8.794,12.015z
M5.836,8.92v2.612l-2.093,0.482L5.012,8.92H5.836z"/>
<path class="tower-path" d="M10.035,8.32l0.606,0.606c2.267-2.355,2.263-6.58-0.016-8.927l-0.591,0.593
<g class="radio-wave--right">
<path class="tower-path" d="M10.035,8.32l0.606,0.606c2.267-2.355,2.263-6.58-0.016-8.927l-0.591,0.593
C11.992,2.781,11.99,6.115,10.035,8.32z"/>
<path class="tower-path" d="M8.631,1.995C9.823,3.41,9.824,5.496,8.635,6.922l0.606,0.606c1.522-1.766,1.524-4.394,0-6.144L8.631,1.995
<path class="tower-path" d="M8.631,1.995C9.823,3.41,9.824,5.496,8.635,6.922l0.606,0.606c1.522-1.766,1.524-4.394,0-6.144L8.631,1.995
z"/>
<path class="tower-path" d="M1.855,8.927L2.462,8.32C0.507,6.115,0.506,2.781,2.463,0.593L1.872,0C-0.407,2.347-0.41,6.571,1.855,8.927
z"/>
<path class="tower-path" d="M3.257,1.385c-1.524,1.75-1.523,4.378-0.001,6.144l0.606-0.606C2.674,5.496,2.674,3.41,3.866,1.995
L3.257,1.385z"/>
</g>
<g class="radio-wave--left">
<path class="tower-path" d="M1.855,8.927L2.462,8.32C0.507,6.115,0.506,2.781,2.463,0.593L1.872,0C-0.407,2.347-0.41,6.571,1.855,8.927
z"/>
<path class="tower-path" d="M3.257,1.385c-1.524,1.75-1.523,4.378-0.001,6.144l0.606-0.606C2.674,5.496,2.674,3.41,3.866,1.995
L3.257,1.385z"/>
</g>
<path class="tower-path" d="M6.246,6.437c1.082,0,1.962-0.88,1.962-1.964c0-1.085-0.88-1.964-1.962-1.964
c-1.087,0-1.966,0.879-1.966,1.964C4.28,5.557,5.159,6.437,6.246,6.437z"/>
</g>