cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Sacred_Totems
Advocate II
Advocate II

Multiple Timers

I am working on my landing page and would like to have the logo fade in using a 4 second timer, overtop a full screen sized opaque rectangle. Then have a 1 second delay.  Then have the logo and rectangle behind fade to transparent fade over 3 seconds. 

 

The only way I can think of achieving this is with 3 sperate timers.  Where upon the prior timers completion it triggers the next timer.  Can we have multiple timers?  Can they trigger another?

 

Example:

Timer 1 fades overlay on top of logo, then starts Timer 2

Timer 2 counts down 2 seconds, then starts Timer 3

Timer 3 fades logo and rectangle to 100% transparency

1 ACCEPTED SOLUTION

Accepted Solutions

*** Update  ***

Attached is the app

View solution in original post

17 REPLIES 17
WarrenBelz
Super User
Super User

Hi @Sacred_Totems ,

Three timers (all set to 3000) would do this - at Screen OnVisible. You can set another one at the start for the one second if you need this. Also for the fade, you might look at an animated GIF.

UpdateContext({vTimer:"Start1"})

Start on Timer1 and Visible on Image1

VTimer="Timer1"

Timer1 OnTimerEnd

UpdateContext({vTimer:"Start2"})

Start on Timer2 and Visible on Image2

vTimer="Start2"

Timer2 OnTimerEnd

UpdateContext({vTimer:"Start3"})

Start on Timer3 and Visible on Image3

vTimer="Start3"

Timer3 OnTimerEnd

UpdateContext({vTimer:Blank()})

 

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

Thank you @WarrenBelz ,

 

 I am trying to get your suggestion to work but the image is disappearing completely and not returning when the first timer completes. 

 

Trying to get the first button/image combo to work I set:

 

Screen OnVisible = UpdateContext({vTimer:"Start1"})

Timer1 Start = VTimer="Start1"

Image1 Visible = VTimer="Start1"

Timer1 OnTimerEnd = UpdateContext({vTimer:"Start2"})

 

I have tried getting Start1 to auto-populate as well, and that results in an error.

 

 

Hi @Sacred_Totems ,

See below - the only addition to my code supplied was in the first bit to initiate the Variable - sometimes timers require this.

UpdateContext({vTimer:Blank()});
UpdateContext({vTimer:"Start1"})

Other than that, it looks like this with the fading white rectangles on top - I left the timers there (which you would normally hide) to show you it working

TimerFade.gif

 

 

 

 

 

 

 

 

 

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

 

WarrenBelz
Super User
Super User

Please disregard - on wrong thread

 

Thanks @Sacred_Totems ,

I will re-post the updated solution from the other thread below.

NOTE - VTimer is not the same as vTimer (I have used a small v throughout).

This is the model working.

Fade3Images .gif

 

 

 

 

 

 

 

 

 

 

 

 

 

Here is the code for the Image control - Transparency

Switch(
    vTimer,
    "Start1",
    If(
        FadeT_1.Value > 1500,
        FadeT_1.Value / 3000,
        1 - FadeT_1.Value / 3000
    ),
    "Start2",
    If(
        FadeT_2.Value > 1500,
        FadeT_2.Value / 3000,
        1 - FadeT_2.Value / 3000
    ),
    "Start3",
    If(
        FadeT_3.Value > 1500,
        FadeT_3.Value / 3000,
        1 - FadeT_3.Value / 3000
    )
)

Image property

Switch(
    vTimer,
    "Start1",
    Scene1,
    "Start2",
    Scene2,
    "Start3",
    Scene3
)

The Duration of the timers are set to 3000 (3 seconds) with the other code
OnVisible of the screen

UpdateContext({vTimer:Blank()});UpdateContext({vTimer:"Start1"})

Start on Timer1 

vTimer="Timer1"

Timer1 OnTimerEnd

UpdateContext({vTimer:"Start2"})

Start on Timer2

vTimer="Start2"

Timer2 OnTimerEnd

UpdateContext({vTimer:"Start3"})

Start on Timer3 

vTimer="Start3"

Timer3 OnTimerEnd

UpdateContext({vTimer:Blank()})

Please copy all of this and it should work as demonstrated

 

Keeping the image separate for right now, just getting the timers to activate one another is not working.

 

 

Ok @Sacred_Totems ,

Can you please give me the exact code you have at Screen OnVisible and the Start and OnTimerEnd of the timers as week as their Control Names.

I just started a brand new screen.

 

OnVisible.PNG

 

Timer1.PNGTimer2.PNG

 

Thanks @Sacred_Totems ,

Obviously Timer 3 reflects the same patterns

The Transparency of the Images?

Also just to eliminate the one difference in our models, but the OnVisible code on a button for the moment.

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

M365 768x460.jpg

Microsoft 365 Collaboration Conference | December 7–9, 2021

Join us, in-person, December 7–9 in Las Vegas, for the largest gathering of the Microsoft community in the world.

Top Solution Authors
Top Kudoed Authors
Users online (3,090)