Fade in and out

Ignition
1

I want to fade page loading with CSS animation, does anyone know how to do that? I really like the animation that Vertech uses in build-a-thon 2021 to show what resources are included in their package. I have downloaded the resources from Ignition Exchange and I think I found the class “magictime vanishIn”. I have tried to add the class to my page, but nothing happens …
I’m new to css, but if any helpful soul want to answer, I’m grateful

2

Think I solved it myself, just needed to put 0 on opacity. Absolutely wonderful animation

3

Do remember that the end user might hate unneccesary animation that are useless for the operation and usabillity of a machine/function.

4

Hi,

Where did you found this class ? How Can I install it in Ignition ?

5

I'm not completely sure, but it may be this one

6

I would use the new stylesheets. Style Classes - Ignition User Manual 8.1 - Ignition Documentation

Example, this doesn't fade, but rather an ease in.

/* Nice transition for views */
@keyframes view-ease-in {
0% {
   transform: scale(0);
  }
  100% {
   transform: scale(1);
  }
}

Example, view:

{
  "custom": {},
  "params": {},
  "props": {
    "defaultSize": {
      "height": 476,
      "width": 560
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "Label"
        },
        "position": {
          "height": 0.4202,
          "width": 0.3571,
          "x": 0.3054,
          "y": 0.2647
        },
        "props": {
          "style": {
            "backgroundColor": "#21E325",
            "borderBottomLeftRadius": 360,
            "borderBottomRightRadius": 360,
            "borderStyle": "solid",
            "borderTopLeftRadius": 360,
            "borderTopRightRadius": 360,
            "borderWidth": 1
          }
        },
        "type": "ia.display.label"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "aspectRatio": "560:476",
      "mode": "percent",
      "style": {
        "animation": "view-ease-in 0.5s"
      }
    },
    "type": "ia.container.coord"
  }
}
1 Like