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?
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%.
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)
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.
pomelopress.com/splash 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
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.
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 ). 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.
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.
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.
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.
If you use Mouser like Pauls page does - https://www.bigwhiteduck.com/stacks/mouser/ - 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.
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.