Unanswered

Animating smoothly with timer

(0) Share

Report

Posted on by romankorchak1

Hi All

I got an HTMl element with linear-gradient css which I am trying to animate smoothly with timer, so I go a following code

"<div style=""
border-radius: 75px, 25px, 25px, 25px;
background: linear-gradient(90deg, rgba(160,45,253,1), rgba(253,45,204,"& If(GoingUpOrDown,Timer1.Value/2000, 1-(Timer1.Value/2000) ) &")); 
width:100%; height:" & Self.Height - 1 &"px;""></div>"

 
And I got following code OnTimerEnd
 
UpdateContext({ GoingUpOrDown:!GoingUpOrDown});

And timer Repeat and Reset is true

Which works, except at the end of the timer colour jerks for a split second

Any ideas why its happening?

Thanks

Categories:

Power Platform Build Tools

All responses (2)

Answers (0)

realwillwright 772 Super User 2025 Season 1 on at

Like (1)

Report

Animating smoothly with timer

Have you tried looking at SVGs. This blog from Kristine should help, I'm not sure if it will be smoother than the HTML version, but might be worth a go. It is the second method.

PowerHack🔮 #3 Two ways of implementing a gradient background in Canvas Apps — Kristine Kolodziejski
WarrenBelz 148,735 Most Valuable Professional on at

Like (0)

Report

Animating smoothly with timer

Hi romankorchak1

If you mean like this

I suspect it will be the timers resetting and momentarily not supplying any value. What you are doing is fairly adventurous.

Please click Does this answer your question 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 a Like.
MVP (Business Applications) Visit my blog Practical Power Apps Buy me a coffee