Cannot change opacity of a div via JS

Ask us anything
1

Hey everyone!

I have 2 containers each one representing a different stage of a signup flow. Container 1 is an email and password input, which is set to display: flex by default with an opacity of 1.

Container 2 is a 6-digit code verification, set to opacity 0 and display: none by default.

Now, I’ve set a Custom JavaScript that fades out Container 1, and then sets the display of Container 2 to ‘flex’, and animate the opacity from 0 to 1, as seen in the snippet below

function animateSignupFormOut() {
  return signupForm.animate([
    { opacity: 1 }, 
    { opacity: 0 }
  ], {
    duration: 200,
    easing: 'ease-in-out'
  }).finished.then(() => {
    signupForm.style.display = 'none';
  });
}

function animateVerificationCodeIn() {
  verificationCodeForm.style.display = 'flex';
  return verificationCodeForm.animate([
    { opacity: 0 }, 
    { opacity: 1 }
  ], {
    duration: 500,
    easing: 'ease-in-out'
  }).finished;
}

No matter what I’ve tried though, Container 2 simply won’t animate in. The document.getElementById shows the correct container, but it just never animates in.

Does anyone have a clue of how this can be achieved? I’m trying to create a seamless signup flow that doesn’t load new pages in or isn’t jittery. Step 1 → animate → Step 2, etc.

I’d appreciate any info on this if anyone has any clues as to why this isn’t working.

2

are you trying to use jquery?

3

I’ve tried doing this natively or via anime.js, both did not work unfortunately. Is it more reliable via jquery?

4

My bad, I completely forgot the animate method because I usually don’t use it, and I thought the code reminded me about jquery :upside_down_face:

try replacing any document with wwLib.getFrontDocument() when you select the elements.

Also setting element’s style directly probably doen’t work as expected because weweb manages them. I suppose the next render will reset your changes. You can try by binding the display (or any other property) to a variable and then change the variable when the animation is finished.

5

I quickly put together a CodePen. Maybe that’s helpful: https://codepen.io/Andreas-Becker-the-styleful/pen/YzgvYLY

6

Thanks @andreas and @dorilama for all the help. I tried both methods and unfortunately none of them helped. Neither queryselectors or specific wwLib.getFrontDocument() managed to get the animation on the verification part to actually take place.

It’ll at best set the display to flex / block from ‘none’, but it’ll never animate the opacity from 0 to 1 :sleepy:

7

Have you tried the exact code as in the functions of the CodePen? Maybe you can record a short video of how you’re using it.

8

@andreas I haven’t tried it exactly 1:1. I am trying to take advantage of the visual builder to get all the elements structured out and then have a Custom Javascript ‘take over’ certain aspects that are rather cumbersome without the use of JS (e.g none to ‘flex’ on display, and then animate opacity accordingly).

Building everything via HTML blocks and CSS is definitely possible, but its going to slow things down significantly :disappointed_relieved:

9

But you are using the functions that you posted initially, right? Try replacing them with the ones in the CodePen. I don’t think it has something to do with the selector/how you query the elements

10

Why don’t you just use the states and z-index with opacity and transitions? It should be like super simple, you can stack them one over another with position absolute, and handle it either with z-index, or just pointer events or something. Without interfering with WeWeb’s state or fancy JS.

1 Like
11

I’ve tried with the functions that you provided on CodePen, but that didn’t change much… Its the same issue I had before where the opacity animation is just ignored and wont go from 0 to 1

12

Wouldn’t that mean that the elements are going to be rendered in the background? I was hoping to work with display: none so the elements aren’t rendered unless they are needed, and same goes for other elements that have ‘served their purpose’.

13

I think you guys are just overengineering this.

Display none doesn’t mean it won’t get rendered, it will be rendered, just not displayed. And also, you can’t animate the display none to anything, as it is not possible.

You would need conditional rendering for this and it would be the same situation as display, you can’t animate this, I mean you could, but it would be too much effort imo, and you would lose the data from undendered elements also.

2 Likes
14

Thanks, @Broberto! I really appreciate the example. It’s definitely a valid approach! :muscle:

I’m just confused as to why the JS functions aren’t doing what they’re supposed to do. If we set the display from ‘none’ to ‘flex’ and then animate (even introduce a small delay while we’re at it), why doesn’t the opacity animate from 0 to 1? That is what’s bothering me more than any other approach, for that matter. I’ll keep testing all the methods out; this is definitely super valuable, especially as I’m getting the hang of WeWeb :heart:

Thanks everyone, I’ll break my head around it and report back if I find anything worth sharing!

1 Like