Custom Scroll Animation Behavior (scroll trigger)
Most of modern apps have some custom behaviour - for example
In user profile, you see big profile picture, but when you scroll down to see user posts - picture gets smaller and moves to the corner.
Would be cool to be able to treat scroll position as kind of keyframes timeline, where you can modify styles of some elements and tween them depending on how much some view is scrolled.
Some tools have kind of similar option - https://www.youtube.com/watch?v=jRHuAq4PqQo - check first 30 secs.
-
Nuhi
commented
Pleas do this features, at least me ti as an option to stick the navbar and tabbar in place and not go on scrool
-
eugene
commented
This should be part of a multi-layer animation system using SMIL animations. And it should export as svg SMIL animation.
-
Paul Waitforit Mooney commented
I think this is more of a micro interaction feature that could be achieved allow elements to use an animation timeline like Edge animate to add scroll as a trigger to animate scale, position, opacity, etc.
Heck why not just plugin Edge animate, it's there not being developed further ;-)
-
This may be a combination of parallax scrolling (https://adobexd.uservoice.com/forums/353007/suggestions/12942750-parallax-and-other-effects-while-scrolling) and microinteraction animations (https://adobexd.uservoice.com/forums/353007/suggestions/12869229-animation-support-microinteractions)
-
Liam
commented
For me this is something terribly important and an area that every other application in the UI/UX arena is failing on.
I think it is self explanatory and most people will know what I mean, but for clarity:
Full height navigation > scroll a bit > Reduced size / collapsed height navigation.
Another iteration of this is:
Full nav > scroll down = nav hidden > scroll up = nav revealed. (BBC News App springs to mind in the UK).
Many thanks and keep up the fantastic progress!
-
James Cee
commented
Im looking for a sticky header or the ability to lock the header once the scrolling happens, and the header hits the top of the viewport.
-
Swaty Shah commented
Its about the header I create in Mobile App Design. Check out the example here: https://drive.google.com/open?id=0BxeS7rP0zhokSEcweGpTUDBoS1U
In many of the apps that are data centric, hiding of header on scroll is a common feature in demand. As presented in the example, header gets hidden on scroll down, and reappears gradually when it is scrolled up. -
Are you asking about the header that appears automatically in the sharing view, or headers that you have created as part of your design? The headers that sharing view adds should already disappear as soon as the user interacts with your prototype (either scrolling, or tapping).
-
Since you have already started with scrollable artboard, my request is pertaining to hiding the header on scroll to get a full screen view in mobile apps. A simple option of Hiding the header on scroll would serve the need. Additionally time could also be added such that if there is a subheader, we could determine to hide it a few seconds later.
