How to disable scrolling of inactive ft-sections?

[cywtf]

When I resize .flowtime to 75% both height and width I see that when I scroll up and down through my ft-pages, all the pages from the neighbor ft-sections also scrolls up and down.

This is a big performance drawback when building a presentation with more than 150 image slides, as all the sections within the presentation scroll when I scroll through the current section.

Would it be possible to disable the scrolling of the pages of the inactive fp-sections / pages? How?

[cywtf]

Inspecting flowtime.js I see that in function navigate(dest), line 1765 using css transform and applying it to ftContainer which is document.querySelector(".flowtime");. This is exactly what I've pointed out before.

@marcolago can you help me to modify this selector to slide only the current section? I don't manage to do it.

[marcolago]

Hi, sorry for the late.

As you have just discovered Flowtime is based on the transitions of the main container. Surely is possible to transition only a single section but this could not solve you problem because, when you change section Flowtime need to transition the container anyway.

Another thing to consider is how to manage the section to section navigation, when you press left or right. Maybe I could force to go to the first page of the section every time, but I have to think about this solution.

I think I could make the changes you are asking but I can’t say how this could take me. If you are not in a hurry I can make a try.

If you need a faster solution, or if you think Flowtime could not satisfy you needs, may I suggest you Reveal.js (http://lab.hakim.se/reveal-js/#/)?

Let me know if you could wait some time to try to do what you need. Thanks again for using it.

marcolago

[cywtf]

Hi @marcolago thanks a lot for your reply and time.

If you could show me the way to build something like this, it would be also good. If you have the time to build an example, also great. Flowtime.js has almost almost everything I need to build an ambitious project which I would be happy to share with you as an example of what can be done with the framework, it's just that I am having performance issues with lots of media / images.

I improved a lot the performance yesterday using responsive images and lazyloading for every page, but when I work with 200 images the fact that the whole canvas is moving and not just a section is consuming a lot of resources, specially on mobile devices.

Ideally, when I am in a section, if I go UP or DOWN I would move up or down within the page (and the other sections wouldnt move, they would remain exactly where they are) and if I press LEFT OR RIGHT I would go to the first page or the next or previous section. That would help cases like mine which make use of a lot of media. It wouldnt work in the casses of gridNavigation.

I tried reveal.js but it's not exactly what I need, as it doesnt give me all the layout customization possibilities that your framework offers. Reveal.js is fantastic, but I can't decide to have fancy layouts with columns or specific positioning inside the page. Your framework allows me to do this very well.I just need to find a way to make it easier for mobile devices or slower computers.

Thanks again a lot for your time and advice.

[marcolago]

Hi.

The description of the functionality you need is clear and I’ve thinked about a way to implement it. I’m not sure this would solve the performance issue but I’ll try.

Please, wait until the weekend so I could try to do something.

I’ll let you know something soon. Thanks for the patience.

[cywtf]

I'll be waiting for the answer. Thanks a lot!

[marcolago]

Hi. I’ve made a firs implementation of what I think you need ;).

You can check a demo here: http://flowtime-js.marcolago.com/examples/scroll-the-section/

You can check the demo and the configuration code at the bottom of the index page to check if this is what you need. I’ve not done a performance test so let me now if this solves you issue.

If everything is ok I still need to do a little implementation for the overview mode but it shold be an easy task.

If you need the source code (not minified yet) you can checkout the dev-slide-section-only branch.

Let me know. marcolago

[cywtf]

Hi,

Thanks a lot for this! just checking the preview link and it looks very promising. I'll make performance tests in different devices and will let you know.

Many thanks!

[cywtf]

I am testing and having one question so far:

Is it possible that this new code is overriding the possibility to disable scroll navigation via APIs? If I use the flowtime.js you provided and I specify Flowtime.enableNavigation(false, false, false, false); all the navigations are disabled, except scrolling, which remains active all the time now.

[marcolago]

Hi. Sorry but probably it's because the WIP status of the mouse wheel code that I'm rewriting. Consider the code in the dev branch a test but I will update it soon with the scroll wheel fix.

Thanks for the patience.

[marcolago]

Ok, fixed and pushed to dev-slide-section-only branch. I also fixed the cross direction navigation with the scroll section modifier.

Let me know.