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
40 comments
-
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.
-
Bilal Alsurri
commented
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
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
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
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
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
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
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. -
David
commented
Need this bad.
-
Vincent AG
commented
This is highly needed.