Request details

← Adobe XD: Feature Requests

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.

321 votes
Sign in
(thinking…)
Password icon
Signed in as (Sign out)
Close
Close

We’ll send you updates on this idea

Adam Pietrasiak shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

30 comments

Sign in
(thinking…)
Password icon
Signed in as (Sign out)
Close
Close
Submitting...
  • Melody Sieverts commented  ·   ·  Flag as inappropriate

    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.

  • Bilal Alsurri commented  ·   ·  Flag as inappropriate

    A scroll trigger with the Auto-Animate feature.
    The morph between the linked artboards starts when the changed elements are in a certain percentage of the viewport and the speed of this morph is determined by the speed of scrolling.
    For Fixed Items, maybe the change happens based on a percentage for the hight and position of the artboard.

  • Andrey Duarte commented  ·   ·  Flag as inappropriate

    Examples:

    Headers when on top of page are a type, when you begins scroll, it transform in one fixed on top of screen.

    FAB buttons when is on end of screen, its can disappear.

  • Anonymous commented  ·   ·  Flag as inappropriate

    What if when some elements need to move to a certain point while scrolling the design. What if we can have in page animation rather than timed animation.

    Time animation is great and easy to work on, but JavaScript can do so much more complicated work. What if we can borrow some more animations from JS.

    In page, the animation would be great like, while we are on a page and we have used animation to happen repeatedly. Such as waves on water, we can use in page animation to make a wave without moving to another artboard.

    And some more animation handling would be better like a controlled speed of Easy In or Easy out animation.

  • Henrik Falck Mentzoni commented  ·   ·  Flag as inappropriate

    Would be good to be able to set, let's say, headers to have a fixed position inside of masks, so when you've scrolled past the mask you've got a header that's perhaps in a different color or something.

    PS: Sorry if it's incomprehensible, english isn't my strongest language.

  • Anonymous commented  ·   ·  Flag as inappropriate

    xd is a very good UX tool. just needs this feature to make that much more powerful. when showing a stakeholder how their new product is going to look via a prototype, they can see exactly what you are translating and i feel this a very important feature to have so that you can covey to them what it is that you are proposing.

  • Henry Riojas commented  ·   ·  Flag as inappropriate

    I do loading an overlay, and the overlay make the scroll, but like is a overlay all buttons of UI is "disable", but you can enable with double click and the overlay is off.

  • Larissa Camargo commented  ·   ·  Flag as inappropriate

    It would be great if I could keep an object fixed when scrolling just from one certain position to another instead of all the artboard.
    In the anexed example I have this light grey contoured box and I want it to scroll with the artboard till the last Title on my page, then I need it to stop moving.

  • Tony commented  ·   ·  Flag as inappropriate

    I am currently designing a prototype of a mobile app. The home screen of this app has a set of buttons which lead to respective information screens. The header and footer-nav are to stay put when viewing these other screens. These screens also have a dropdown to be able to navigate between each other after leaving the home screen. This dropdown is only present on these screens.

    I am attempting to use auto-animate to move the buttons off the screen and bring the info content on the screen. However, there is enough info to warrant scrolling. The only way to keep the "off screen" content associated with the artboard is to have it grouped with the content that it is replacing.

    The problem is that I don't want the drop-down menu to scroll with the content, but it has to be grouped with the content in order for auto-animate to work properly.

    As I see it there are two solutions here.
    1) Allow a fixed object to stay fixed even when grouped with objects that will move when scrolling.
    2) Find a way to associate content outside of an artboard with said artboard to allow auto-animate to work on the content without the need for grouping.
    2a) Possibly a dotted resizable perimeter surrounding the artboard. Anything falling within it is associated with it when using auto-animate.

  • WT commented  ·   ·  Flag as inappropriate

    Similar to jQuery waypoints or something similar to allow for layer properties/styles to be changed when the user scrolls to a 'waypoint'.

    EX:
    - Add new waypoint
    - Attach layers to waypoint
    - Set Different Properties in 'Waypoint Group'
    - When user scrolls to that waypoint, the styles are updated

    Would be nice to have transition controls as well.

  • Biswajit Nath commented  ·   ·  Flag as inappropriate

    Like bootstrap having a feature called affix (Fixing particular part of page after scrolling a particular amount of main page).

  • Allem commented  ·   ·  Flag as inappropriate

    This is pretty rare feature among prototyping tools and it would be extremely useful to have in XD since this is common web & mobile effect. Basically it would be a new trigger type based on scroll position, where depending on user specified value (in pixels), certain actions would happen.

    Scroll trigger with fresh introduced Auto-Animate action would open wide array of possibilities like shrinking navbars, moving/resizing icons and cards, changing colors, showing/hiding objects, all while scrolling.

    This is simple example of navbar appearing while scrolling down and dissapearing when top is reached again:
    https://redvinestudio.com/demos/how-to-make-your-navigation-appear-on-scroll-with-jquery/

  • Lauren commented  ·   ·  Flag as inappropriate

    I would like to be able to fade-in content at certain scroll positions, this is a common animation seen on websites.

  • Matza commented  ·   ·  Flag as inappropriate

    Hui Flinto is good … Hie XD will become the same … some day …

  • Siby commented  ·   ·  Flag as inappropriate

    Provide a way to scroll content inside a page or box and not just artboard scroll. Example scroll contents in popups, scroll in terms and conditions contents (which are very big).

← Previous 1

Adobe XD: Feature Requests: 02 : Prototype mode

Feedback and Knowledge Base

(thinking…)