Streaming live at 10am (PST)

Animation being triggered when div display is changed


#1

Hi All

I’ve set up some interactions for a vertical wizard I’m building. Basically, as you click on the continue button it makes the div underneath visible and navigates you down to that div (using some custom jquery code)
I also indicate to the user where they are by making their current step font colour red.

So here’s the problem, for some reason when the animation is initiated for the first time the interaction will trigger quickly, causing it to flash red and then back to its original colour. I imagine this has to do with the fact that the panel is having it’s display mode changed. But I’m not sure what I can do to fix this.

Any suggestions?


Here is my public share link:https://preview.webflow.com/preview/retirement-benefits-design?utm_source=retirement-benefits-design&preview=a4299573552b59e09d77ebd912c953b8


#2

If you’re giving each of your section an ID in the Style tab, you can use this ID for the Continue button. The page will then scroll to that ID. (you can have uyour reveal IX and the link on the same element.

Also, if you make your left vertical bar a Nav Bar, you only have to style the font color for the text and digit for the Current state, meaning the current item will take the red color as soon as the regarding section is in focus.

What I’m saying is that you probably don’t need JS for the Continue action, and probably don’t need IX for the color change of the item on the left.

For the intermediate items, you can use a Unicode square symbol, considered as a text, and it will also take the red color.

Here are a few Unicode squares that you can copy, and paste into your design: ■ :black_medium_square::black_small_square:

So if you want to adopt what I’m recommending, make sure you’ll give your Navbar those properties:


#3

Initially that’s what I tried, but I found that the page didn’t animate down to the section because of the fact that I think the interaction I tied to the button to make it visible, was only executing after the link setting telling it to navigate to the section. So it wouldn’t work initially, once it was made visible and you clicked it again then it would work. So some kind of racing condition where the page was being told to navigate down to the element before the element was visible. This also didn’t work in code initially, only by wrapping it in a setInterval to cause a small delay to make the sure the element was visible, did it work.

I’ve wrapped some more custom animations around the left wizard, when you navigate down you’ll see that once a section has been completed the number disappears and gets replaced with a plus tick mark to indicate that it’s been successfully completed. Additionally there’s some customer behaviour in the left wizard bar. depending on the choice the user makes on the wizard some of the elements disapear (when making the choice between Guaranteed Annuity and Living Annuity)

So given these restrictions do you think it’s worth my while to try and rebuild this with a navbar component?


#4

I think that if you don’t alter the visibility of the sections having the IDs, but instead only alter the one of their content, the links will work right away. You can build a proof of concept with dummy elements quite quickly anyway, to test it. I would, because it’s dead simple and it’s using simpler tech.


#5

I’m not following you. Do you mean that the sections are visible the div’s inside of them are not? Because if this was the case one would still be able to scroll down to a bunch of empty sections (I’m sure I’m not understanding this incorrectly)


#6

If a section is unsettled and has no content, it has no height and don’t account for scroll.


#7

ok, I’ll try it. the only snag I see being that I have set the height some of the sections to 100VH as I don’t want more than one section visible at a time, but I suppose I could set that programmatically.


#8

Why don’t you set the 100vh parameter to the content of the section? As soon as you unhide the content, the section gets the 100vh and you can scroll to it.


#9

great idea! ok, I’ll try it. Thanks for your help!