Please take a look at this video. In it, you will see that when a button is clicked, the existing page content disappears and a new content section fades in and up with a nice transition effect. How do I recreate this fade-in effect please? I am assuming I need to keep this all on one page and just hide the first content block and display the new content block? If so, how do I get the second content block to fade in and up nicely like in the video? Thanks again everyone!
Yes, it can be achieved with position absolute I’d say. I did a slider like this once. You gotta play with classes/states and apply them based on the index of the steps/items
I went digging into my old projects, what I did was something like this
/* Set transform translateX to nextSlide */
.isNext {
transform: translateX(100%);
}
/* Set active slide to be 100% opacity, by default non active slides are 0 */
.isActive {
opacity: 1;
}
/* Set transform translateX to prevSlide */
.isPrevious {
transform: translateX(-100%);
}
/* Slide default styles, */
.slide {
transition: opacity .5s, transform .5s;
position: absolute;
opacity: 0;
}
With your onclick workflows you could do something like this in terms of styling. You can also add some scaling. This also was dynamic, so it is definitely doable, but sending the whole code would be useless, as it was a PHP code generating the equivalent of Bind Collection to a div.
@Broberto thanks for the reply. I’m trying to follow the above and implement using no-code. So I switched from having the content sections display/not display using the Display property, to flipping their Opacity between 0 and 1. This does give me a much smoother transition which I like. The issue now however is that all the elements are still technically ‘displayed’ and so the visible element is no longer taking about 100% of the parent container, which is what I want. Any suggestions how to fix that please?
I found this post from @dorilama which suggests that binding the opacity to a variable and then adding a transition should achieve the desired effect. I can get this to work once the element is displayed, but can’t get it to work when trying to first change the display property. Any suggestions please? Thanks!
This thread might be an answer to your display/opacity combo not working
I’ve answered it somehow there. If that wouldn’t be clear, feel free to ask.
1 Like
You can cheat this by using transform scale and basically set it’s delay/duration to 0 while transitioning opacity you could set to a little delay and transition. This way you get the desired effect, while not using display property. Once the element is displayed as none, you can’t apply transitions to it. That’s how the web works, as also explained in the blog I mention in the other thread.
1 Like
Have you applied position absolute for the elements in your first video? this way they should take 100% of the available space, as they will be overlapping. After that, you can simply work your logic to show/change them.
1 Like
Position Absolute worked! Thanks @Broberto! Are there any risks to be aware of when using Position Absolute?
1 Like
Not really, you shouldn’t be using position absolute to position elements often though, but in certain cases like this, if your main container (containing the absolute elements) is position relative/normal in WeWeb I think, then it’s just fine. It should not break anything.
Though Absolute is not something you want to use often, as it does respect only the relative parent element, but in this case it’s what you need actually. I wouldn’t worry.
If you want to do some reading on the topic, here is a nice post about it.
If you want to boost the animation effect, you can also add some transitions like
bottom: -30px for example, and then just make it bottom: 0 for that smooth effect of sliding in that you shown in the first example video.
OK thanks. Looks like this will work!
1 Like
Cool I will give those extra animations a try too! Thanks!
1 Like
@Broberto I hit a new issue. I am able to interact with ALL elements on the page, even if those elements currently have their opacity set to 0. Any suggestions please?
I was able to fix it by adjusting the Z-axis of the active element using variables. Seems to work. That ok?
After doing some research, it seems that visibility: hidden would be a better option for my use case than setting opacity to 0. Does WeWeb support that?
I got visibility to work! This is definitely better than opacity, as visibility prevents any pointer events being processed. When page 1 content loads, I simply use Custom CSS to set all other ‘pages’ to visibility: hidden and then use some simple Custom JS to toggle it based on button clicks. Much better. 
Thanks for all your help @Broberto!
An other common solution can be to set the css property pointer-events to none, and put it back to initial when you want to interact with it
2 Likes
That’s what I was about to say, but the other solution is valid also.
1 Like