Smooth fade-in and fade-out of menus based on CSS3 animations

2020-02-27T18:12:41.267000Z

I watched a isualization preview video Codesys put on Youtube that someone linked to in this forum.

In it Roland Wagner talks about, among other things, fading in and out menus based on CSS3 animations and relocating widgets via drag and drop. I was super interested and immediately went looking through the help files and through the Codesys store for examples. Or really anything online. I haven't found anything, but maybe I'm looking up the wrong terms.

How would I implement menu fades and drag and dropping of widgets?

I could imagine that for the drag and drop I would have a boolean variable change to true while the finger is pressed, unlocking the X and Y coordinates which are set by another variable. Then somehow read the x and y coordinates of the finger or touch pen and have the widgets X and Y values change to match, possibly with an offset of some sort. But is there a different more official way or library for this?

I'm not at all sure how to do menu fades. Is that a transition animation between visualizations or is it 1 visualization with different elements that have their opacity changed as you push different buttons? Is there another way to do that, a library, example project etc?

Oh now... I seem to have found what I was looking for. It's the "Using Client Animation" tutorial in the online help.

Recent posts to Smooth fade-in and fade-out of menus based on CSS3 animations

Smooth fade-in and fade-out of menus based on CSS3 animations