Skip to Content
Technical Articles
Author's profile photo James Barlow

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

 

Assigned Tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Alexander Blasl
      Alexander Blasl

      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:

      if(FLAG3 >-1)
      	{Panel_HF.setCssClass(CSS[FLAG3]);
      	}
           FLAG3=FLAG3+1;     
          FADE.FADE_IN_HF(); 
      Panel_FPY.setVisible(false);
      FLAG2=0;
      Panel_HF.setVisible(true);
      TIMER_FADE_IN_FPY.start(10); //Transition every 10 seconds
      Author's profile photo James Barlow
      James Barlow
      Blog Post Author

      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 🙁

       

      Author's profile photo Alexander Blasl
      Alexander Blasl

      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.