Design Layout / Build Help Required

Hi,

I am currently building a site and have a few design build issues that I am trying to resolve along with some snags. I have created a list below (not sure if this is the best thing to do or do I need to create individual posts?)

If anybody can point me in the right direction or have any solutions to any of the items below that would be perfect.

Note: I understand that I may be limiting the triggers due to the site build but could not see alternative structure to achieve what was required.


  1. Work Section

Currently click bottom right to view next / previous project. Ideally we want this to work on scroll. I had initially used IX2 however I could not get this to stop on each project, it simply scrolled through all.

Slider issue

I have 2 sliders on each project example of the Work section. The Slider works fine on the first project but not on any of the others. I have searched the forums and see that display:none can cause an issue however this is not used in this case. Any ideas?

2 - Project Progress Animation

On each project there is an circular icon in the background. When each project is displayed the outer bar is to animate to a particular %. (I have looked at doing this using a Gif however this was loading when the site loads, so not visible when in view. Is there a why to enable the Gif to load when in view?

3 - People Section - People Slider

I have a Slider acting as a nav to scroll through the team. Is there a way enable the team nav to appear infinite (so its continuous rather than the blank sections at either end.)

4 - Get In touch

Currently sends data to form. Would also like to open email client on submit. Assuming custom code / attribute would work here however this caused the submit button to remain on ‘Please wait…’


Staging SIte - https://fountech.webflow.io/

https://preview.webflow.com/preview/fountech?utm_source=fountech&preview=14a3f3a4699b18014379305967d1fa75

Hi @thinkrandom, thanks for the questions and for your post, I have a few comments for feedback:

Currently click bottom right to view next / previous project. Ideally we want this to work on scroll. I had initially used IX2 however I could not get this to stop on each project, it simply scrolled through all.

I am not exactly sure what you are trying to do here. Is it possible for you to create a screencase or send screenshots how to access the behavior and how you want to change that? here is a good tool we use at Webflow: https://getcloudapp.com

I have 2 sliders on each project example of the Work section. The Slider works fine on the first project but not on any of the others. I have searched the forums and see that display:none can cause an issue however this is not used in this case. Any ideas?

Is it possible to send a screenshot of those elements? I am not sure which slider/page you are referring

On each project there is an circular icon in the background. When each project is displayed the outer bar is to animate to a particular %. (I have looked at doing this using a Gif however this was loading when the site loads, so not visible when in view. Is there a why to enable the Gif to load when in view?

The Gif is going to run at page load, Webflow does not do anything to the gif to make it play by default, that behavior to autoplay or repeat is built into the gif. You might be able to use some custom javascript to load the gif using the link to the gif shown in the asset manager I would probably create a separate post on how to load a gif at runtime after the site has loaded.

I have a Slider acting as a nav to scroll through the team. Is there a way enable the team nav to appear infinite (so its continuous rather than the blank sections at either end.)

I took a look, I would recommend to give the Mask a width of 100% and each slide having a width of 25%, then the the mask will be evenly distributed and will scroll 4 images at a time evenly and infinitely auto-repeat.

Currently sends data to form. Would also like to open email client on submit. Assuming custom code / attribute would work here however this caused the submit button to remain on ‘Please wait…’

At the moment this is not built in, I would probably create a new post about this to check the custom code being used.

Thanks in advance

Hi Dave,

Many thanks for your response, very much appreciated. Please see my comments below, hopefully this helps.

Currently click bottom right to view next / previous project. Ideally we want this to work on scroll. I had initially used IX2 however I could not get this to stop on each project, it simply scrolled through all.

I am not exactly sure what you are trying to do here. Is it possible for you to create a screencase or send screenshots how to access the behavior and how you want to change that? here is a good tool we use at Webflow: https://getcloudapp.com

See screen cast - Slider Snag & Scroll
Currently the trigger is clicking the next / previous button - can this be done using mouse scroll?

I have 2 sliders on each project example of the Work section. The Slider works fine on the first project but not on any of the others. I have searched the forums and see that display:none can cause an issue however this is not used in this case. Any ideas?

Is it possible to send a screenshot of those elements? I am not sure which slider/page you are referring

See screen cast - Slider Snag & Scroll
First project example works fine, the following projects the 2 sliders do not function.

The Gif is going to run at page load, Webflow does not do anything to the gif to make it play by default, that behavior to autoplay or repeat is built into the gif. You might be able to use some custom javascript to load the gif using the link to the gif shown in the asset manager I would probably create a separate post on how to load a gif at runtime after the site has loaded.

Thanks, thats makes sense, I will look into this.

I have a Slider acting as a nav to scroll through the team. Is there a way enable the team nav to appear infinite (so its continuous rather than the blank sections at either end.)

I took a look, I would recommend to give the Mask a width of 100% and each slide having a width of 25%, then the the mask will be evenly distributed and will scroll 4 images at a time evenly and infinitely auto-repeat.

I will have a look at this option, however will this not conflict with the IX of each slider appearing in and out of the mask?

Thanks for your help.