I disagree. This does not require any JS. It is 100% supported as it is pure CSS and SVG. In fact the whole thing can be done without any third party software at all, with just a little know how.
@NP209
I have done many things like this with SVG's and animations, though this "waves" animation was one that I hadn't seen before.
I will say, the "secret" that you were probably missing was that any class which is created in the designer, will automatically be given the psc- prefix when it is compiled. Therefore to target those classes in the stylesheet you must include that prefix on all classes. For instance, instead of the logo class you would instead use psc-logo.
The first thing that I always do with something like this is import a blank SVG into ignition, from there it's simply a matter of knowing how to build the SVG's in a way that Ignition will render what you expect (Ignition actually does a pretty good job of supporting the most common SVG element types).
For this, I built two separate SVG's, one for the logo, and one for the waves.
The logo is very simple, as it is just a path. The html you posted include another path, but as far as I can tell it is not needed for anything and only adds confusion.
Then it was just a matter of applying the classes at the correct levels and typing in the CSS.
End-Result (Note much smother in person the GIF wreaks havoc on the animation):
I used Coordinate Containers, and a Flex Container, but you could probably accomplish this with just flex containers too.
View JSON
{
"custom": {},
"params": {},
"props": {
"defaultSize": {
"height": 221,
"width": 1000
}
},
"root": {
"children": [
{
"children": [
{
"meta": {
"name": "waves"
},
"position": {
"height": "50px",
"width": "100%",
"y": 120.63
},
"props": {
"elements": [
{
"elements": [
{
"elements": [
{
"d": "M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z",
"id": "gentle-wave",
"type": "path"
}
],
"type": "defs"
},
{
"elements": [
{
"fill": "rgba(255,255,255,0.7)",
"href": "#gentle-wave",
"type": "use",
"x": 48,
"y": 7
},
{
"fill": "rgba(255,255,255,0.5)",
"href": "#gentle-wave",
"type": "use",
"x": 48,
"y": 3
},
{
"fill": "rgba(255,255,255,0.3)",
"href": "#gentle-wave",
"type": "use",
"x": 48,
"y": 5
},
{
"fill": "#fff",
"href": "#gentle-wave",
"type": "use",
"x": 48,
"y": 0
}
],
"style": {
"classes": "parallax"
},
"type": "group"
}
],
"type": "group"
}
],
"preserveAspectRatio": "none",
"style": {
"classes": "waves"
},
"viewBox": "0 24 150 28"
},
"type": "ia.shapes.svg"
},
{
"children": [
{
"meta": {
"name": "logo"
},
"props": {
"elements": [
{
"d": "M250.4,0.8C112.7,0.8,1,112.4,1,250.2c0,137.7,111.7,249.4,249.4,249.4c137.7,0,249.4-111.7,249.4-249.4 C499.8,112.4,388.1,0.8,250.4,0.8z M383.8,326.3c-62,0-101.4-14.1-117.6-46.3c-17.1-34.1-2.3-75.4,13.2-104.1 c-22.4,3-38.4,9.2-47.8,18.3c-11.2,10.9-13.6,26.7-16.3,45c-3.1,20.8-6.6,44.4-25.3,62.4c-19.8,19.1-51.6,26.9-100.2,24.6l1.8-39.7\t\tc35.9,1.6,59.7-2.9,70.8-13.6c8.9-8.6,11.1-22.9,13.5-39.6c6.3-42,14.8-99.4,141.4-99.4h41L333,166c-12.6,16-45.4,68.2-31.2,96.2\tc9.2,18.3,41.5,25.6,91.2,24.2l1.1,39.8C390.5,326.2,387.1,326.3,383.8,326.3z.",
"fill": {
"paint": "#fff"
},
"type": "path"
}
],
"preserveAspectRatio": "xMinYMin",
"style": {
"classes": "logo"
},
"viewBox": "0 0 500 500"
},
"type": "ia.shapes.svg"
},
{
"meta": {
"name": "Label"
},
"props": {
"text": "Simple CSS Waves",
"textStyle": {
"classes": "h1"
}
},
"type": "ia.display.label"
}
],
"meta": {
"name": "FlexContainer"
},
"position": {
"height": "150px",
"width": "100%"
},
"props": {
"alignContent": "center",
"alignItems": "center",
"justify": "center",
"style": {
"classes": "inner-header flex"
}
},
"type": "ia.container.flex"
}
],
"meta": {
"name": "CoordinateContainer"
},
"position": {
"height": 221,
"width": "100%"
},
"props": {
"style": {
"classes": "header"
}
},
"type": "ia.container.coord"
}
],
"meta": {
"name": "root"
},
"position": {
"x": -231,
"y": -250
},
"type": "ia.container.coord"
}
}
stylesheet.css
.psc-header {
position:relative;
text-align:center;
background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
color:white;
}
.psc-h1 {
font-family: 'Lato', sans-serif;
font-weight: 300;
letter-spacing: 2px;
font-size:48px;
}
.psc-logo {
width:50px;
fill:white;
padding-right:15px;
display:inline-block;
vertical-align:middle;
}
.psc-inner-header {
height:65vh;
width:100%;
margin: 0;
padding: 0;
}
.psc-flex {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.psc-waves {
position:relavtive;
width: 100%
height:15vh;
margin-bottom:-7px;
min-height:100px;
max-height:150px;
}
.psc-parallax > use {
animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.psc-parallax > use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.psc-parallax > use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.psc-parallax > use:nth-child(3) {
animation-delay:-4s;
animation-duration: 13s
}
.psc-parallax > use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
}
@keyframes move-forever {
0% {
transform: translate3d(-90px,0,0);
}
100% {
transform: translate3d(85px,0,0);
}
}
If you would like to better understand what's going on with the SVG paths, I can expand on that, as such you can copy and paste the above JSON and CSS into your project and explore how I set it up.
