How to ease in a background color

Ask us anything How do I?
1

Hi there,

my header should be transparent until the user scrolls down to 100. Then it should ease in to change color.

I have create a state which chances the background color after context.screen?.[‘scroll’]?.[‘y’]>100. This works fine. But how do I get to ease in the background color?

I have tried with the transition parameter but nothing changed. Please advise.

Thank you and best regards,

Jörg

2

Can you show more of what you’ve tried and what result you are getting? A video can show a lot in just a few minutes.

3

Thanks for picking this up, raydeck,

you can check out the current page behavior by scrolling down at https://www.avgs.haus/

Here is the definition of the state ‘scrolled’

Screenshot 2024-03-04 at 14.33.40
Screenshot 2024-03-04 at 14.33.40578×522 14.7 KB

Screenshot 2024-03-04 at 14.34.01
Screenshot 2024-03-04 at 14.34.011518×682 65.5 KB

And here are the parameter for the transition. I have tried ‘all’ for the property as well. So difference :frowning:

Screenshot 2024-03-04 at 14.34.27
Screenshot 2024-03-04 at 14.34.271038×716 148 KB

Hope this helps, otherwise pleas elet me know what you need.

Thank you and best regards,

Jörg

4

Looking under the covers via devtools, the transition is set on the child div while the parent is changing. I made a short video illustrating the phenomenon:

5

Thanks, raydeck,

your video made me realise and fix the issue. Now I change the background of the first container in the section and not the section itself :slight_smile:

Thank you and best regards,

Jörg

1 Like
6

Wonderful! Love the hard puzzles. We tackle questions like this every day in State Change office hours. The low-code aspects of weweb come up often, and we make progress together!

1 Like