New Jet stack by Doobox


(Doobox Software) #1

##Animate any stack as it appears in the window.

##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.

See a demo of JET in action here


(David Ellsworth) #2

Excited to use it… dropped it into a Foundation Screens page and nothing - whether the two checks thingies are checked or not.


(Doobox Software) #3

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.


(Robert Ziebol 🖖🏼) #4

Actually, I was wrong, it probably will not ever work in Screens.


(Brad Halstead) #5

@zeebe

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…

Just more meat for you to chew on lol

Brad


(Andrew Tavernor) #6

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.


(Brad Halstead) #7

@tav

And Jet requires a page load or scroll trigger? If I understand you correctly…

Brad


(Andrew Tavernor) #8

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.


(Brad Halstead) #9

@tav

Yes, I understand how Screens works, my query was in regards to the Jet requirements (without using Screens) :wink:

Thank you for your thorough explanation though, it is nice when things are explained this deep :+1:

Brad


(Doobox Software) #10

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).