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.
-
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)!
-
Farshad Sadri commented
Currently it require using drag in prototyping and it is very limited and can not has any sort of timeline! It's a killer feature like the component states. I hope you do it fast like other great features you already developed.
Thanks. 😊👌 -
John commented
This is very difficult to prototype for clients to ask them to click to see the "sticky" menu. They just want to scroll to see it automagically appear.
-
Anonymous commented
PLEASE!!!!!!!!
-
Jeroen Klous commented
in adobe xd you can set the view port height thus you have the total height. it would be great to have a trigger to set it on scrolling and set the amount of height or width when the animation should take place. for example height is 0 and you scroll down an element for example a header will animate sliding upwards. but when scrollng al the way on top at the point where height is zero the elemt slides back into place.
with this you can also give 2 fields to set some height numbers to give an area in between a trigger so it triggers at a certain point and after that back to default.
-
Gustavo commented
I'm very happy to see this feature is under review. Any idea when it's gonna be available?
-
Tornike Chkhvimiani commented
As a frequent user of Xd, I think that it would be great if we add some scrolling animation using the auto animate tool. When you are choosing the artboard, you have to be offered with the auto animation tool, which creates the same artboard copies with the name adding "Artboardname_Downscroll" and "Artboardname_Upscroll". With using This tool we would be able to create auto animations for the situations when the scrolling action starts. It can be used for movable and adaptable headers and etc.
-
Dennis Ferreira commented
So happy when I received a notification about animating elements between art boards - it made XD worth using, it would be a game changer if we could animate elements based on scroll position (would be great if we could simulate anchor tags as well - like scroll to an element when another element is clicked)
I have added all the above feedback in appropriate places and thanks for all the other features that have neem added thus far.
-
James Kachan commented
Essential feature. Used all the time in web and app design.
-
Melody Sieverts commented
Currently I am imitating this behavior by creating full screen artboards and auto-animating between them. This works well if I want to make a video of the prototype, less well if I want to send it for review since you need to click (or drag, or wait for a time delay) to animate between artboards and it doesn't simulate actual use.