##34 preset animation styles.
Just place any stack inside the Jet stack, and select one of the 34 preset animation styles. Now as soon as the stack appears in the window as the user browses your page, it will be animated into view in the style of your choice. You are able to further customise your animations by setting a time delay from the normal trigger point.
###MAIN FEATURES
34 preset animations.
Animations are never clipped by parent stacks.
Time offset delay control.
Break out of the themes constraints to avoid clipping the animations.
Jet stacks can be nested.
Bulk of code is shared across multiple instances of Jet in the same page to reduce page overhead.
Can be used inside responsive layout stacks like columns without clipping.
I just had a quick look at the screens stacks theme demo, and it seems to have it’s own animations stack built into it. I suspect there is a conflict there that will not be able to be resolved. If you’d like to contact me via Doobox support page, I could dig a little deeper.
Jet works fine on the very first page of Screens but does not show content on any other screen pages, this is without using the screens animations stack, just screens styles, screens menu, screens, screens page containing… Jet which contains… a header stack, a Block Quote Stack and a Paragraph Stack. Each Screens page is uniquely ID’d… at least in preview mode, did not try an export…
Screens does not scroll the page - that is how its snap scroll effect works. Hence anything that relies on scroll detection as items come into view will not work as everything is within the page immediately - just some of it hidden. This is the reason for the Screens animate stack, it is simply an animate.css wrapper that is triggered not by page scrolling but by a unique hook from the Screens stack as the page changes.
Think of Screens as a full screen vertical slider rather than normal page and it may explain things a bit more.
No, not page load, just as items come into view - hence items on the first page work. Foundation animate will do the same.
Screens is just a stack of slides all within the browser height - so they are all in the viewport immediately. As the use swipes and they apparently scroll down the page, in fact slides are just translated up and down by the browser height and their z-index changed.
As I said, in essence it is just a very fancy, swipe controlled vertical slider.
What triggers an animation in Jet is the fact it is within the bounds of the viewport (window).
Weather or not it is visible is irrelevant to Jet.
So when the page first loads if any Jet stacks position is, or would be, visible in the viewport, then the animation is triggered immediately.(subject to any delay set in the options).
If it is below the viewport, it will not be triggered until the user scrolls the viewport until it is visible in the viewport.
In the case of screens, no matter what, the stack is always going to be in the viewport when the page loads, because of the way screens is structured. So even though you can’t see Jet at first, it would have been triggered already.
I should add to the “Known issues” on the demo page:
Jet can not be used inside elements that are hidden at page load time.
(screens, screens, other than the first screen count as hidden elements).
Hello, and sorry for the questions, but I’m not quite sure I understood how the triggering of the animation is done.
I would need to know if:
Animation can be triggered when the subject APPEARS IN THE WINDOW of the web browser of the user and what other triggers are available? …
the animation pauses when the subject DISAPPEARS FROM the WINDOW of the web browser of the user and if the animation is then ready to be replayed or not? …
or in other words, without having reloaded the page, what is the behavior of the subject WHEN IT REPAIRS in the browser window? …
