Technical Articles
Create a fade transition effect when showing/hiding widgets
Following on from my previous blog post Animating panels to create a drop-down effect
In this post we will look at how the UX of Analytic Applications can be enhanced via fading
widgets in & out – instead of instantly appearing on screen.
Below is an example of the fade effect in action – using switches and a slider to show what’s possible.
Create a fade effect
In this example we will create a fade of a single panel.
Components used
Custom CSS styles
The styles set panel opacity ranging from 0 – 100 %
.panel_0 .sap-custom-panel-widget{opacity:0;}
.panel_10 .sap-custom-panel-widget{opacity:0.1;}
.panel_20 .sap-custom-panel-widget{opacity:0.2;}
.panel_30 .sap-custom-panel-widget{opacity:0.3;}
.panel_40 .sap-custom-panel-widget{opacity:0.4;}
.panel_50 .sap-custom-panel-widget{opacity:0.5;}
.panel_60 .sap-custom-panel-widget{opacity:0.6;}
.panel_70 .sap-custom-panel-widget{opacity:0.7;}
.panel_80 .sap-custom-panel-widget{opacity:0.8;}
.panel_90 .sap-custom-panel-widget{opacity:0.9;}
.panel_100 .sap-custom-panel-widget{opacity:1;}
If you want a smoother transition effect you could add more styles in smaller increments.
e.g .panel_01 . sap-custom-panel-widget {opacity:0.05}
.panel_02 . sap-custom-panel-widget {opacity:0.06}
You’d also need to update the CSS array variable and subsequent logic that checks the value of the FLAG variable.
Steps
1. Add a panel and 2 buttons to the canvas
The panel can be any size and any background colour fill – name it ‘Panel’
2. Create a script variable ‘CSS’
Declare it as a string and set it as an Array
3. Populate the CSS array variable with the custom CSS styles
In the onInitialization event use the following code
CSS = ['panel_0','panel_10','panel_20','panel_30','panel_40','panel_50',
'panel_60','panel_70','panel_80','panel_90','panel_100'];
4. Create a 2nd Script variable ‘FLAG’
Set the type to Integer and set the default value to 10
5. Add code to the fade in button: ‘btn_in’
This code calls the Script function FADE.FADE_IN
FADE.FADE_IN();
6. FADE.FADE_IN
This script function checks the current value of the FLAG variable & if it’s less than 11 calls the Timer ‘TIMER_FADE_IN’ with a delayed start of 0.06 seconds
(this delay value can be changed to slow down / speed up the fade effect)
if (FLAG < 11)
{TIMER_FADE_IN.start(0.06);}
7. TIMER_FADE_IN
This code checks the value of FLAG and if it’s greater than -1 it applies a CSS style to the Panel.
if(FLAG >-1)
{Panel.setCssClass(CSS[FLAG]);}
FLAG=FLAG+1; //Increment the value of FLAG by 1
FADE.FADE_IN(); //Call the FADE_IN function again
CSS[FLAG] is used to pick the CSS style from the CSS array variable – the value of FLAG tells the code which position in the array to choose.
e.g. a FLAG value of 2 would apply the custom CSS style ‘panel_20’
CSS = [‘panel_0′,’panel_10′,’panel_20‘,’panel_30′,’panel_40′,’panel_50’ ……………..
At the end of the Timer code, we call the FADE_IN function again – so we’re effectively creating
a loop that will run until one of the conditions specified is not met.
The logic is reversed to create the Fade out effect
btn_out code:
FADE.FADE_OUT();
FADE.FADE_OUT code:
if (FLAG > -1)
{TIMER_FADE_OUT.start(0.05);}
TIMER_FADE_OUT code:
Panel.setCssClass(CSS[FLAG]);
FLAG=FLAG-1;
FADE.FADE_OUT();
Summary
Using simple scripting & custom CSS styles we have created a fade in/out effect.
The really cool thing is that although we are applying the CSS opacity style to a panel – it also fades any widgets that are contained within the panel.
In the example at the top of this post 2 panels were used (each with a transparent background)
yet the fade effect still worked on the images & text boxes contained within those panels.
Feel free to add comments, questions below & as always further help from the community can be
found here: Analytic Designer Q&A
Hi James Barlow ,
thanks a lot for this. I implemented a faded transition of 2 Charts every 10 seconds with a timer, so the timer runs all time creating a lot of entries in my console. I noticed that this timer uses a lot of performance and other interactive things (buttons, filters) take more time to complete. Also the transition with 10-20 opac-panels/flags is taking long and it doesnt look smooth so I switched to 8 levels. But I think I am turning this timer off again now. Are there any things I can optimize?
Code of 1 timer. Both have the same:
Hi Alexander, (sorry massively delayed reply as I've been on leave)
I suspect the performance impact is because you're running the fade script on continuous loop -SAC only seems to run scripts in sequence (not parallel)
While the fade code is running, other scripts (like any onClick button events you have) will have to wait until the current iteration of the fade code has completed.
In my example the fade effect was only run on demand.
I bet the performance impact could be recreated using any script that constantly looped in SAC 🙁
Hi James Barlow
thanks. so there is no optimization at the moment 🙁
If a Timer would be an exception and so a parallel operation, this would be nice.