Can Sections Pro approximate Screens?

Wondering if it is possible, @tav or any other knowledgable soul, for Sections Pro to function in the same way that Screens does. By which I mean can the separate sections be entire pages that do not overlap one another, but go from one to another sequentially.

If so, what would be those settings? What would I spec? And if so, is there a little down arrow, or the equivalent?

Thanks in advance.

You can do everything apart from the paging though there is a way to ‘almost’ get that.
(I’m typing this on my iPad so I’m doing it from memory and may get a couple of the names wrong)

  • Make the height of the sections 100% browser height and in the Same settings area select ‘vertically centre contents’
  • Enable and add a marker for each section.
  • Add MagicGellan to the top of the page, this will see and enable you to scroll to each section.
    You’ll still have to be careful as to the quantity of content in each section as too much will cause the section to increase its height beyond the 100%.

This site uses SectionsPro and MG, only the 1st one is 100% high but you can see the effect

For the down arrow, I’d place a SectionsFix at the bottom of each SectionsPro with your chosen arrow and set the link to be the name of the marker for the next SectionsPro (manual process I’m afraid)

1 Like

Thanks so much for your response.

I was just typing the following when your message came in:

UPDATE: Well, the good news is that I figured out (I think) how to get a hero page per section.

The bad news, and the reason I wanted to find an alternative to Screens, is that animated elements that work perfectly fine in Rapidweaver itself, do not translate online. That was true of Screens; the same thing is happening with Sections Pro. is the test page: the elements of the second section (without any navigation, sorry…just hit page down) are animated to fade in sequentially. Works in the app. Not in the browser. I am completely flummoxed.

They’re probably animating on page load therefore you don’t see it as it’s off the browser window when it happens.
I don’t know what you’re using to animate them but if they are done with SectionsPro animate then change the animations so that they trigger ‘when in view’ not page load. Look at the SectionsPro backgrounds on the HomeTurf site, they appear each time the section comes in view

Thanks again, Paul.

I did in point of fact spec “when in view”.

Put the various elements into boxes, with different timing. Worked perfectly in the program.

If I scroll quick enough after refresh I can see them animate, so they’re working but I think your problem is that they start when the top of their containing SectionsPro is in view … it only takes 1px of the SectionsPro to appear on screen to trigger the animation.
2 options: add a delay to all the animations so that they don’t start until ½ sec after the SectionsPro has initially appeared or…
Add a new SectionsPro without any settings inside you current one and move the 3 items and their animations into it, this way the animations won’t trigger until the 1st menu item enters the browser window.

1 Like

Thanks @PaulRussam - answers are spot on.

I have toyed with the idea of adding an offset or even a “is totally in view” option to the animate stacks. The reason it works the way it does at the moment is for performance. You can have very many animations on the page with no lag or performance hit (as Paul frequently does :wink:). If I am absolutely convinced that offsets can be used without detriment to such situations then I will add them. At the moment though the jury is still out.

1 Like

@tav @PaulRussam

I applied both of your recommendations: first, increasing the animation delay only; secondly, adding the extra Sections stack within the other Sections stack and moving the elements into it. Neither works for me online.

If you can see that I did anything wrong, this is the file:


I think that you can simplify this a lot.
Just use the Foundation animate stack in the 100% high sections - it requires a lot less setup and for simple fade ins would be my choice unless you needed more complicated triggering conditions.

I’ve made you a super simple example project which you can download here
and this is how it looks in operation:

I hope this is helpful.

1 Like

Ironically, I had used Foundation Animate in my initial attempt, and it didn’t work. But yours works. Of course. THANK YOU SO VERY MUCH.

Wondering if you might cough up one more little item. I am looking for a very slim, very elegant, totally minimal down arrow. It is not clear to me from Paul’s previous advice how exactly I would do that.

Thanks, Andrew.

If you use Mouser like Pauls page does - - you can set it to use a dropzone and then drop in an image instead of using the animated mouse.
You can then tailor your arrow as you wish in a drawing package. A png for an arrow like that will be tiny in file size and it will look bespoke.

“Bespoke” is such a lovely British word.

1 Like

Well, everything was ready to boogie, but for one huge thing: the link on the HeaderPro stack for “enter” refuses to work, no matter what page I spec.


In the SectionsPro Advanced settings, set the Content Z to 1.
This is necessary when things are in Animate stacks.
That should get things clickable again.

1 Like

That did indeed work. Thank you.