I’m gradually getting to speed with how to use web flow and have spent hours trying to set-up scroll progress bar on “blog post template” under CMS collection page as well as a modal pop-up on the contact page. I think I’m missing something which I’m unable to figure out on my own and would appreciate some help.
so the problems that you have is with your interactions. For the progress bar, I couldn’t find any interaction that would make the progress bar increase on scroll. You have to set a while-scrolling interaction for the progress bar to work. For the pop up modal, there was an interaction, but no element was selected on it. Select the pop up menu on the interaction and set it to hide and show however you want. I hope this helps to put you on the right track.
Thanks Pablo. I managed to fix some of the issues. However the sign up wrapper isn’t showing after the modal wrapper pop-ups. Could you please provide a simple step by step explanation on how to fix this as if you’re teaching a beginner?
So I tried to get your sign up modal to work, but no matter how I went about it I could get it to show, in my experience when that happens is better to delete that element and build it again, so i did that. I created a modal that works on load. you can see the element order on the attached image.
Div block 7 is the new modal that I created. It has the same settings that you had, and some more, I put it with a form centered vertically and with the X image to close the modal with an animation. Div 7, just like your other modal you had, is position fixed on full screen with a z index of 9999. My display though, is shown, flex vertically on the center.
So that covers all the screen and is on top of all your other content right? so now we have to hide it and show it again, thats how modals work, so we need to add an animation to div 7. You go to animations select on page load, create a new timed animation, set div 7 as your target, select animation hide/show, select hide at the bottom, and turn the set as initial state on. Then, you add another step on the animation with 1 second delay or as long as you want your user to wait until the modal pops up, the target is again div 7, but this time you select the flex option that you have at the bottom.
Then all you have to do is set another animation, this time on one click, to hide the modal again. To do that select the X on top of the form on the designer, then go to animations, select element trigger, mouse click, then start a new timed animation, select hide/show with the div 7 as your target and you are done.
so for your scroll bar you already built the hardest part, all you have to change now is your animation. You had an animation but it was not the right one. Go to your scroll bar animation again and change move for size like it is on the attached pictures.
That should fix your progress bar issue. To download materials from your site, I would suggest to use an integration from a third party like mailchimp. Or you can just put a form linked to a mailchimp account and set that mailchimp account to send the desire content automatically.
I hope this helps you. Take care.
Ok thank you! Is there a specific figure to set the size width and height when it’s 0% and 100%? I have just changed the animation to size and delete scale but not getting a the right outcome.
Yes so if you click on the picture you can see the whole animation box, when it is at 0% you set the width to 0% and at 100% your set the width at 100%.
