Custom Scroll Animation Behaviour
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.
Adam Pietrasiak
shared this idea
58 comments
-
Anonymous
commented
4 years later...
-
Anonymous
commented
Same here, I wish to implement scroll animation. But I'm surprised that it can't be done :/
-
Adam Parish
commented
It's really disappointing to see that this feature still isn't available. XD has come a long way over the last few months, and I'd love to see this functionality added soon.
-
noah
commented
建议可以在fix position when scrolling后边添加一个参数，设置该元素滚动速率，比如在fix position when scrolling选种状态下，后边增加一个百分比，默认为 0%，证明不滚动，如果调整数值到 1%～99% 之间，可以让该元素随页面滚动的速率降至1%～99%之间，如果填写100%那么直接就取消 fix position when scrolling 这个选项的选种状态即可。
En:I suggest that you can add a parameter after fix position when scrolling to set the scrolling rate of the element. For example, in the selected state of fix position when scrolling, the back increases by a percentage, the default is 0%, which proves that no scrolling, if the value is adjusted to 1% Between ～99%, you can reduce the element's rate of scrolling with the page to between 1% and 99%. If you fill in 100%, you can directly cancel the selection status of the option “fix position when scrolling”.
-
Anonymous
commented
The app Principle nailed this feature, please take lessons and adapt
-
Carl И
commented
I just started out with XD, and this is pretty much the first thing I wanted to do on my first major project. It's such a bummer that people have been asking for it for so long, and there's no sign of it being developed. Such an important element, just not there, within like a week of starting out.
-
Anonymous
commented
Hi Adobe team, this is HUGELY important. Please consider adding this feature soon
-
Mike Britton
commented
As a developer, I'd like to be able to trigger transitions to component states by having components listen for a "scroll position" event. When the component receives the event, I'd like the ability to evaluate a value based on the screen height and positions of other components, and control various aspects of the listening component.
-
Luca
commented
This is an essential feature for prototyping web designs, please add it asap!
-
Anonymous
commented
I would like to bring up the menubar after scrolling vertically, perhaps taking advantage of the easing effects.
-
Yash Tamrakar commented
Here a YT tutorial that serves as a workaround for this:
https://www.youtube.com/watch?time_continue=44&v=PV3Dd-saJsw&feature=emb_logo
-
Bhojendra Rauniyar
commented
Currently, XD only supports actions. But it would be great to have user events. For eg. Scroll To is action that is added to XD while the same can be added in event type - On Scroll.
This feature will be an aid to various use cases. Here's one example:
Let's say, when we view the prototype, "when scrolling" floating action bar disappears, "when scrolling stopped" the floating action bar appears again with some animation.
So, this means; if we can have events then we can have any components state changes.
-
Marcus
commented
Yes please! ELEMENT ANIMATION on scroll. This is very much a normal part of modern, cool webdesign these days!
-
Edu Couchez
commented
Sigh! XD evolution is starting to remember me the one with Illustrator. Usability and common sense implementations delayed for years. Suppose XD will mature in the 30's when we no longer need screen devices.
-
Edu Couchez
commented
under review since 2016 :-)
-
RS-Bjtwede
commented
It seems that this could also be used for custom scroll bars and carousel position indicators if linked to component states.
-
Damien
commented
Feature under review 3 years ago...
Going to assume that this probably won't be worked on/implemented any time soon.
-
Dario Bartels
commented
I want to be able to trigger events on scroll like for example
Have the navigation bar of my desktop website start at the bottom of the screen then when the user scroll to the point when the navigation bar reaches the top it will trigger the "fixed position" behaviour and become a sticky header.
Or trigger overlays on scroll
Trigger foward / backwards animations with scroll ion the same way that the trigger drag works (if you think about it dragging for mobile is like scrolling on desktop)
Trigger video/gif to start playing when reaching a scroll point to simulate the "auto-play videos" feature that sites like Facebook have now (when you implement the feature to import videos or gifs)
Trigger zoom behaviour for simulating things like maps behaviour or zooming in on a product photo
Etc
-
Cee
commented
Please, we need this feature!!
-
Fabian Stückrath
commented
Please give us this feature! In the UX world scrolling up- or downwards implies a lot about the users intentions and can be used in so many ways. The workaround via drag animation is sometimes not an option. Scrolling needs to be an event (trigger)!