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 III
Super User III

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 III
Super User III

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
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

secondImage

Demo Extravaganza is Back!

We are excited to announce that Demo Extravaganza for 2021 has started!

MBAS on Demand

Microsoft Business Applications Summit sessions

On-demand access to all the great content presented by the product teams and community members! #MSBizAppsSummit #CommunityRocks

Power Apps June 2021

June Power Apps Community Call

Did you miss the call? Check out the recording here!

Top Solution Authors
Top Kudoed Authors
Users online (27,791)