We Keep Coding

Scroll and let content stick while animating

I'm wondering how to achieve the following scroll animation, Where the STRATEGY and CREATIVE copy dock to the top and then animate while the user scroll, and when the animation is done, the page continue to scroll.
Please see page example here: https://www.mrsandmr.com/
What is this called in theory.
Thanks

I recently did some research on this as well, mainly inspired by the impressive web design on Apple product pages, like this one.
Here is a nice article I've found on Medium, which explains how to achieve such scrolling animations: How to jazz up your website like Apple with JavaScript
The result is available on the demo page here.
As summarized in the TL;DR section:
To sum it all up, the mechanism of how it works is really just:
1. A scrolling container
2. position: sticky;elements
3. JavaScript that converts scroll position of the scrolling container to styles for sticky elements
4. (Sometimes) CSS transition property
Animation logic for strategy/creative on "Mrs&Mr"
I would break it down to the following animation phases:
translateX from the outside (relative to scroll position) until the 2 elements reach the center of the viewport
Now rotate until 180° again relative to scroll position
Again, translate but out of the viewport

Trying to create a Responsive Scrolling Sticky Menu

I'm trying to create a responsive website in Dreamweaver with a header and menu which initially scroll and then stick to the top of the page.
The header and menu would need to scroll over the top of a fixed hero image.
This hero image can't be defined as a background as it will be powered by a flexslider script to change the image after a set time.
I would also like the sticky header to possibly shrink down in height when it reaches the top of the page, to reduce the amount of screen space it takes up.
I've found a number of sticky menu examples on-line and some seem to have the annoying trait where the content directly below the menu disappears behind it at the point at which the menu sticks to the top of the screen. I would like to avoid this.
Please find a Mock-up of what I'm looking for here
Obviously, all of the above won't be acceptable on a mobile device.
So for mobiles, the header would need to scroll out of the way, leaving just a hamburger style menu fixed at the top of the screen.
I have found a number of examples on-line with elements of what I require, but nothing yet that combines everything.
I've tried cutting and pasting code from different sources, but haven't yet achieved the desired effect.
I don't know if what I'm asking for is workable, but I would appreciate if anyone could point me to examples of how to achieve this (or improve upon what I'm looking for).
Thanks
Neil White

Use this JS
http://stickyjs.com/
it adds the class is-sticky to the element which you wanted to stick to top. So you can add height in css for is-sticky class. Which in terms will reduce or increase the height of element when it reaches to top as per your requirement.

JavaScript libraries that handle would highlight the edge of scroll container where there is content

I am lacking of a better term to describe this UX. It is basically a content container that is scrollable. Depending on the scrolling position, the top or bottom edge of container would light up (or change style) to indicate there is content at either of the direction. For example, when you go to Yahoo.com, and scroll down a little, the top edge of the scrollable section would turn purple, indicating there is content at the top that's outside of the viewport. (See image below)
I wonder if there is already some well known script library that can achieve this so I don't have to reinvent the wheel.

This is a fairly custom concept, but you can see how to get started by looking at the way Bootstrap's Affix method works: http://getbootstrap.com/javascript/#affix
Essentially you will need to have a scroll event listener which tracks what the position is that a user is scrolled on a container. When the scroll position reaches certain breakpoints, the listener function will trigger CSS classes which may do a variety of things.

Animated Scrolling with SuperScrollorama + Greensocks

I'm having a little trouble getting my head around a Javascript animated scroll issue.
I'm using the SuperScrollorama Jquery plugin which is built on-top of the Greensock JS tweening library.
The fundamental effect I'm after is to "pin" a section down, then use vertical scrolling to expand some content, then "unpin" the section once the content is fully expanded, so the user can scroll on - i.e. http://blueribbondesign.com.au/example/
But when I try to apply this same effect to multiple sections one after the other, everything gets all broken: the "unpinned" content below the pinned element is pushed off screen and it seems to miscalculate the height of the element when it performs the animation in reverse (i.e. scrolling back up the page). - i.e. http://blueribbondesign.com.au/example2/
I've been endlessly fiddling with the "position:fixed" and "pin-spacer" div, and tried attaching the Superscrollorama plugin to various containing elements, but still cannot work out how to get it to work.
Any help from the brilliant crowd-sourced minds of the web would be much appreciated,
Cheers,
TN.

I've been working with this issue myself. What happens is there's a blank div spacer put above the section being pinned with a height that you've defined in the pin() function. Secondly, the pinned element gets a position:fixed assigned to it. Both of these things allow the scroll bar to continue down the page while the element stays affixed. In turn, whatever you had below that section gets bumped down because of that spacer div's height.
If your pinned element is centered horizontally, first give it a left:50%, margin-left:-{width/2}px to fix it from pushing to the left edge.
Next, you'll have to detect the pin/unpin events (which are offered by the plugin as parameters additional to "anim"), and change the section underneath to also toggle a fixed/relative position. When you change that underlying section to be at a fixed position, be sure to set its "top" property to whatever the pinned element's height is. Once the pinned element becomes unpinned, change it back to relative positioning. Does that make any sense?
It seems that different techniques will call for different fixes, but those things are what I'd pay attention to... fixed positioning, and then using the pin/unpin events for adjustment.

webapp movement

i have created a webapp using only html css javascript using iui library i have few pages and all the content is inside one html page and for page navigation and slide effect i have used iui framework
when there is lot of content i can scroll vertically up and down which is fine however what i have also noticed is if i drag the page horizontally either left to right or right to left and also if i drag the page from top left diagonally the entire page is moving in those directions which is not good
i would like this movement to be locked and even if i use the finger to slide across or diagonally the page should stay fixed and should only move vertically up or down
do i need to write any meta tag to avoid this movement.
using only html css and javascript is there a way to fix this or are there any other alternatives without creating the app natively using xcode

If the webpage is wider than the width of the viewport then the behavior you describe will occur. However if you ensure the content width is set to 320px (and no child transparent-ish elements are pushing content past that demarcation point) then you shouldn't be able to scroll sideways.
If that's not working for you, you should be able to use the touchstart/move/end events and disable the default behavior in javascript using preventDefault() on the event object - http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

Hey Sudhakar! Why not using the list?
First, check if your viewport meta is correct. Then, perhaps a media (image) is larger than the global viewport.
Last, this could also due to a width: 100% + some padding/margin. To fix that, box-sizing: border-box; could be your friend
R.