Hi Team!
Can I have my content to appear with some opacity transition after fetching is done (loader disappear with transition)?
Currently it appears too roughly in a wink.
Thanks again for your great product!
1 Like
Hi Anna!
There is a way how to add/manage visual transitions of any element in WeWeb. While WeWeb is lacking the transitions and animations options of, say, Webflow at the moment (these are coming soon through a new “States” feature), WeWeb provides the option of binding all display, sizing and margin properties to variables and that gives you a lot of power to control the appearance of elements in your app - including transitions.
Here is an example of how you can create a “soft” transition of an element. Creating a soft transition of an element means you have to control the opacity of that element over time. You want to progress the opacity of an element from 0 (invisible) to 1 (fully visible) and the best way to do that is to use a for loop.
STEP 1: Create a number variable.
STEP 2: Bind the opacity property of the element where you want to have the soft transition to this variable.
STEP 3: Create a global workflow that will gradually increase the value of the variable you created in STEP 1.
This workflow should include the following actions:
(1) Set the value of the opacity property (defined in STEP 1 above) to 0
(2) Set up an iterator (for loop) for a number of steps that will be used as increments of the opacity. I typically use 10, but it can be any number. The higher the number, the smoother you can make your transition.
(3) Change the value of the opacity variable by a small increment in each step. Because I typically use 10 steps, I increase the opacity value by 0.1 in each step.
(4) Add a time delay in each of the iteration steps. I use 30ms in this example.
STEP 4: Trigger the workflow
At this point, you have the element where you want to manage the transition bound to a variable and you have the transition global workflow defined. The last thing you need to do is to trigger this global workflow.
You can trigger this workflow on click or on page load. Here is an example where I trigger the workflow on click.
So when the user clicks on this button, it will display the element but with an opacity of 0. The workflow will then gradually increase the opacity from 0 to 1. The time delay in the for loop will create the soft transition effect.
2 Likes
If you want to animate the opacity you can just use css transitions for that. Weweb lets you easily add them with the click of a button :).
Just bind the opacity to be 0 when the collection is fetching, 1 otherwise. Then add a transition in the advanced panel clicking on the plus button.
2 Likes
Wow amazing! Thank you
1 Like