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.
79 comments
-
Gustavo Fernando da Silva
commented
Is there any updates on this? It's under review for too long, since jul 2016.
-
Rob K.
commented
There are already a couple of ideas regarding scroll animation and behavior and such. But i think i got an idea to cover all that in one single feature. For now i'm calling it Scroll Position States.
The idea is that when you make a component from a scroll group this scroll group becomes a special kind of component so the component states can be triggered by scroll position as well. And with the combination of Auto-Animate you can create powerful things with this.
You could mimic all kind of scroll animations this way, like parallax scrolling, objects appearing or change shape when you scroll down or up, etc... etc..
When you into Prototype mode to make a new interaction there will be a new trigger called Scroll Position. Selecting this gives you the option to fill in a number. This would could be pixel value or percentage. And then you can set the destination state (or even artboard to go to be able to make even crazier stuff).Designing the states would work the same way you do now for components. So nothing new there.
What do you think?
-
Neil Stevenson
commented
Hi, I raised this is the XD Adobe Community and I was recommended to post it here:
Hi guys, love XD. Would viewport animations be doable in the near distant future? At present I have to create invisible hover state items that trigger an animation but could this be achieved by the viewport position. This would be absolutely game-changer and give us all a massive edge. Thank you all. -
Aaylajart@gmail.com
commented
This is a very common pattern in native iOS and Android apps, especially with the top app bar, not to mention many navigation menus on the web. It's also not very easy to "fake" this type of interaction with the existing prototyping functions, so I'd love to see it get its own support.
-
Vladimir
commented
Scrolling/position for webpages based animations would be awesome.
-
Lily Taylor
commented
Be able to set the trigger for a poop up ect to be set as scrolling.
-
Anonymous
commented
So many websites have animations triggered by a scroll, or when an elements comes into view within a browser. XD is crying out for this feature!
-
Diego
commented
Yes, please add this feature! I am trying to implement a sticky nav that starts out transparent, but then the background fills white on the scroll, but there doesn't seem to be an option to do that.
-
Wilson Semilio
commented
Would like to be able to implement this feature as I've seen it on many websites and apps as a nice way of getting more "screen real estate" for content without a top menu getting in the way when it's not needed.
-
TM
commented
There should at least be a way for the nav bar to start just a little lower than the top then stop at the top and stay there as the user scrolls. That's basic.
-
Mohammad Harb
commented
it would be cool to add a video/gif/animation and trigger the frames with while scrolling as most of modern websites have such effects.
-
Eshkar Galili
commented
I'd love a component to be in default state when I reach it on the prototype and have him auto animate to a second state when I scroll past him, and also have the component have a reverse action when I scroll back, allowing for parallax effects or picture fade outs as I scroll past it.
-
Gustavo Fernando da Silva
commented
It will be a game changer in the prototyping software battle. If you launch this before Figma, it will be the icing on the cake
-
Aggie
commented
Hide Nav/Header on Scroll Down & Show on Scroll Up
-
Andy
commented
Scrolling/position based animations would be awesome.
-
Stephanie Stibor
commented
Yes, agree with everything Tim Schaeppi said below. Please add features that allow scrolling animation. This is yet another basic feature that XD is missing.
-
Scott
commented
Yes! Creating work arounds for the lack of this feature is SO time consuming, but for so many thing SO necessary when showing designs to stakeholders. Based on lack of time to mock this up on certain projects, we just don't add a feature that would be cool, but too time consuming to mock up or walk someone through with no visual.
Please add this very basic feature!
-
Tim Schaeppi
commented
Everywhere I look this is one of the most highly requested features... And it's available within almost all of XD's competing products.
It's pretty clear Adobe does not care at all about what designers actually need and use. They are completely out of touch with real professionals, and instead focus on gimmicky features that have no real world value. Nobody wants to co-edit in XD. Nobody.
Adobe, please just have a single shred of humility, admit you have no idea what you're doing, and start listening to your users. THIS is the kind of feature we need.
Can we just agree that the priority should be catching up to the competition instead of front-loading gimmicks and useless stuff that nobody requested?
-
Ishan Rathod
commented
yes please!!
-
Aenias Fritsch
commented
We really need this Feature, Adobe! Please!