I have an item within a scroll view that I want to expand to a FS view with additional information. I guess a good example of this in the wild would be apple’s native camera roll behavior. It’s a scroll view of a grid of photos. When you tap on a photo, this element expands into a FS view with additional elements. When you exit this view, the aforementioned element that you tapped on goes back into it’s position within the scroll view. I’ve made this element a component so I can easily swap out assets and build the final state easily so it works for any item in the scroll view. The problem I am having is when I tap on the item and introduce the other elements in the “selected state”, I have to do some maneuvering so that these new elements (contained within the component) are ontop of the other elements in the scroll view. Otherwise I’d have other elements still covering everything else. The problem with this is when I exit the FS view, it has a rather strange animation behavior as it’s being put BACK into the scroll view container. If this container clips then the animation is even stranger as parts of it are cut off in the transition.
Mind sharing your file or work in progress so we can take a look? It helps to understand how you have build it in order to give you the best advice.
From what I’ve understood, I’d put those other elements in the selected state in a separate component that always sit on top of the scroll, and display them in their ‘selected’ state whenever you open a photo in FS.
About the strange animation that you mention, I’d need to see either the file or a screengrab/gif of such effect to understand it better.
I tried out your advice with the separate component. There is still a slight “choppiness” that I think is a result of the layering when I have to take the element out of the scroll group so that it doesn’t get clipped or show up in weird positions based on scroll position. Otherwise it’s a nice solution for the “preview state”
I guess my question is: is there a more elegant solution to this? Ideally I wouldn’t need to make a separate artboard for each item in the list. But because it seems I am required to take the element OUT of the list group it doesn’t seem like I could use something like “Open Preview” as a message to the elements in the list view to scale (this was my first idea)
https://drive.google.com/file/d/1yrtWj3mDF5nKra9kOL_0Xp5Nm8-SLZ0p/view
I’ve checked your file and I don’t feel that ‘choppiness’ you mention, it goes quite smooth, I think the trick you did is what I’d have tried too, on tap (or touchbegin) I’d have taken out the item from the scroll and animated it to expand.
I cannot think of a more elegant solution at this moment, maybe some other members would throw some light in here, if I think of something else I’ll comment again!