Develop Reference

Typeform-like multi-step form animations in React

I'm trying to create a multi-step form for a booking process, and I want to create an animation like this https://www.typeform.com/templates/t/dessert-order-form-template/ , where an input remains fixed in the view for a certain amount of scrolling until it reaches a break-point and smooth-scrolls to the next container. I've been trying to find information on how to do this, but I don't quite know what it is that I'm exactly looking for and how to ask for it.
What adds to the complexity of my problem is that the one container's height is dynamic (a user can add inputs that increase its height). How could I factor this in?
I have a vague idea of how I could pull it off, using anchor tags to scroll to elements. But I don't know how to keep the container in a fixed position for a certain amount of scrolling, and I also don't know how to address the dynamic-sized component.

You can use scrollmagic
Splide.js also could be useful if styled properly.
I personally think that scrollmagic is better for this but I've done quizes in splide so its definitely possible to style it similar.
Its also doable by yourself but Its hella lots of work. With additional libraries it can be faster.
There is a scrollmagic example link, I found it in 2 min so if you google for some more examples you could find one more similar to yours
Also there is a video about simple pinning: link

How to check if an html element is on top of other?

Lets say I have a website where I have some components and main panel. The idea is to take components and add them to the main panel (like a website builder of some sort). And the question is how do I know if I have one component on top of another? Also it would be perfect if i'd know the coverage area size
Note: I dont like the idea of checking positions for every element on this panel. If it can be done with getters or something similar i'd be happy

you can always use "inspect element" option in Google. There are so much option for developers.
and of course if you are developing something you would have an assumption about the initial position, so this is not a problem while doing.

Polymer's Animated Pages used with Angularjs

I would like to ask if there are any examples related to Polymer's animated pages ( http://www.polymer-project.org/docs/elements/core-elements.html#core-animated-pages ) and how we can build a similar demo using the resources provided in the Angular/material repo (https://github.com/angular/material).
I would like to achieve http://www.polymer-project.org/components/core-animated-pages/demos/music.html but I don't want to use Polymer since I would like to use Angular.
Can you please provide me some directions in order to start?

What they typically do with Polymer is have two connected elements which shows only one and when you perform some action, the other gets shown (from display: none) and animates from certain dimentions to its final form. Sometimes elements also shift but it depends on whether the content is able to move to its new position or not.
You have to work with css transition, transform and display. Sometimes even custom animations. And you are mostly changing multiple divs to their final form. I think the most difficult would be animating colors (from white to pink or from yellow to green for example) as those are most difficult to do (performance-wise).
If you look at the example you've set (final link) you see there's a list of items with a detail div and once you click the item you show the detail and transform the contents to its final dimentions.
Just know that these things are pretty hard if you aren't very much into Angular or HTML/CSS/Javascript.
The framework of Polymer for Web is very much a work in progress and i wouldn't be surprised if it took a few months to get similar results for both native and web.
You can take example from things like this: https://medium.com/tictail-makers/giving-animations-life-8b20165224c5 or https://www.polymer-project.org/apps/topeka/ or http://codepen.io/collection/amheq/ . And don't forget to speed it up by using some bootstrap theme like this http://fezvrasta.github.io/bootstrap-material-design/ or something.
I've been struggling with the same problem as there isn't much to go from right now. You stated the Angular project but that will take time. If you want to do it now, you have to do quite some work (if you do, share it with us), but you might be better of with postponing this until most of the bugs and problems have been solved.
Thats what i'm doing now.

How can I disable the "Up" arrow via CSS

I'm not sure this is even possible. I have a UI built that uses javascript and css, the interface users use a keypress to navigate. Css for the layouts that change per client, like a "skin". Javascript controls the functions and monitors the users keypresses.
The setup has 2 menus, a lower one and upper one. When you load it the lower one is focussed and you can use left or right arrows to go between the menu items.
In normal circumstances you would press "up" to get an upper menu, however this one client does not want this menu at all.
The problem is that we cannot just simply edit the javascript to prevent it, since the same javascript is used for all the clients, only different css get loaded based on which client is selected.
So now I have the upper menu hidden, but the problem is that the javascript still allows you to press up, but now since the top menu is not there, you lose your focus, and nothing is highlighted. The end user doesn't know why or how they lost focus if they press up by accident. (since they know no different setup where the top menu is there, they don't realize that they should press down, they just know nothing seems to happen when they press left/right)
What I want to do, is somehow, in the css, prevent the users from pressing up. Since we can't just go change the javascript.
Is this possible? Or is my only solution to modify the javascript?
TIA!!
Thanks to all who offer advise, just to clarify, we will make a new release with a function to check if the client wants this other menu, and disable the up button if not, however that will require a new release of the software, and a full pass through QA. Just trying to quick hack this one client in the mean time.. :)
Our final solution would have a boolean field in the database, and if it's true, the javascript will have an ignore for the up key, if false, then act normally.

Change the code so it only acts on up-arrow key-presses if an element isn't present.
EG add a p with the class="noupkey" then stop the event from firing like :
if($('.nokeyup').length === 0) {
//Do normal behaviour
}

Unfortunately there is no correct way to disable components through css, for this type of functionality is meant for javascript.
The philosophy for most programmers that I have worked with is that you should allow the end user to decide if they want to use a new feature.
What I mean by this, is that you should leave an option in the app that lets the person disable the component themselves. This way you can have the same set of javascript for all users and still disable any component in the correct way. The real advantage to this is that you wont have to deal with this ticket ever again, the support staff could simply walk any client through the operation of recreating the requested feature.
Most of this solution might be unusable to you however. I understand it's not easy changing your workplace convention.
Here is something that might be a little more useful, How do I disable form fields using CSS? Some of the advise might be applicable to any component, including menus.

Actually it is very odd solution but it can be done with little tricky solution .
Make One transparent Div with more z-index , with Absolute Position at the body level over that Up Button , For rest of your applications apply Pointer Events Css property to none so your mouse events will be done on the Below Div .
Then for your Case in which you want to disable that control do not give Pointer Events to the foremost div it will be disabled for mouse events .
Note : There is some issue for Pointer events in IE.

Javascript component for window/pane flip effect?

I'm prototyping a thin client UI using extjs and am looking for an effect that will simulate a form/pane flipping over to reveal another form/pane. Its for a details view for an object that has two major sets of properties.
I found a flex component that can do this, and can even simulate four different forms on the faces of a cube.
Just a sexier, more fun way of doing what you can already do with tabs.

This particular effect may not be available on a cross-browser basis quite yet. Doing perspective transforms on a given DOM element is only possible in two ways that I know of:
1) Renderer-specific extensions, like Webkit's -webkit-transform
2) Rendering the DOM element inside of a Canvas element and then doing transforms on that
The problem with #1 is that it's clearly not going to be cross-browser. The problem with #2 is that you'd more or less have to write your own complete markup renderer for canvas to really get everything in an arbitrary DOM element in there.
(OTOH, I wouldn't put it past some ambitious and clever JavaScript ninja to have attempted #2, so though I haven't seen it yet, I wouldn't be totally surprised if someone else can point towards something like it...)

I would stick with the tab solution if you want to get your project done within a reasonable time. This does not exist for ExtJS - the one in Flex does a 3D effect. The only solution close is to just have content in 4 cells of a table that slides into view (according to the direction of the arrow you used), within a DIV, and have the overflow property set to hide, so you can mask out the other cells and show one cell at a time. Then use the animation (fx) functions to slide the content in and out of view, perhaps with some arrows you hover over or click.