Smooth transitions of page elements and progress bar

Ask us anything How do I?
1

Hi,

I am designing a web app using weweb where users can log in and add different projects and project details to their account. To do this I have a page which guides them through the hierarchy with only the relevant sections showing, i.e. the user must select a Project before they see the next dropdown appear for Epic, then must select an Epic before they see a dropdown appear for Content. Is there a way for these elements to transition smoothly onto the page?

Once the user has entered their information, they submit it and it writes to Airtable. Based on this I update a variable which updates the progress bar. Is there a way for this to transition smoothly from one value to the next, e.g. from 20% to 40%?

I have tried to use the transitions property in the Effects section of the containers I am using but it doesn’t seem to make any difference. Not sure if I’m just using this in the wrong way?

Thank you!
Carly

2

Hi Carly!

One way to make your elements appear in a smooth way, would be to use the Animation feature (which is in Beta). You can set the initial appearance to something like opacity: 0 and depending on the duration setting, it will ease into the page. If you don’t have access you could contact the support I think.

For the progress bar, the transition property should have done the trick. Have you set it to the div that have its width changing?

JP

3

Thanks JP! I’ve made the progress bar work now but I can’t see the animation feature at the moment. Do you know if there is a way to make the transitions work for containers?

Thank you,
Carly

4

Without the beta feature, you can define the animation with custom styling (you can add that in an HTML Embed to preview that in the Editor). The @keyframes is where you define the animation:

<style>
@keyframes fadeIn {
  from {
    opacity: 0;
    top: 24px;
  }
  to {
    opacity: 1;
    top: 0;
  }
}
</style>

Then, on any element you want to animate on mounted, you can add the following Custom CSS:
animation: fadeIn .4s ease;

CleanShot 2024-05-15 at 17.03.15

2 Likes
5

Thank you! This works perfectly :slight_smile:

1 Like