How can I fade in & out the opacity of the Text elements based on the phase? If phase is identity then the text opacity should be 1. When a view at the edge of the scrollview is 1/3rd visible, the text opacity should gradually increase from 0 to 1 as it scrolls into view. Similarly, it should decrease with opacity 1-0 as the view goes out of view. Please note that the RoundedRectangle with overlay Text is just for demonstration, it’ll eventually be replaced by a custom view with several elements including a Text view.
struct ColorScroll: View {
private let colors = [Color.red, Color.blue, Color.green, Color.yellow, Color.brown, Color.indigo, Color.purple]
private let titles = ["Color.red", "Color.blue", "Color.green", "Color.yellow", "Color.brown", "Color.indigo", "Color.purple"]
var body: some View {
let itemWidth = 150.0
VStack(spacing: 20) {
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 10) {
ForEach(colors.indices, id: .self) { index in
ZStack {
RoundedRectangle(cornerRadius: 25.0)
.fill(colors[index])
.frame(width: itemWidth, height: 200)
.overlay(alignment: .leading) {
Text(titles[index])
.font(.title2)
}
.scrollTransition(.interactive, axis: .horizontal) { content, phase in
content.offset(x: phase.isIdentity ? 0 : phase.value * -itemWidth/2)
}
}
.clipShape(RoundedRectangle(cornerRadius: 25))
}
}
.scrollTargetLayout()
.padding(.horizontal, 20)
}
.frame(height: 200)
Spacer()
}
}
}
Any help is appreciated.
2
You can have multiple scrollTransitions! Just put one on the Text:
.overlay(alignment: .leading) {
Text(titles[index])
.font(.title2)
.scrollTransition { content, phase in
content.opacity(1 - abs(phase.value))
}
}
Notice the formula 1 - abs(phase.value). You can graph this with respect to phase.value and see that this produces the effect you want. When phase.value is at 1 or -1, the opacity is 0, and when it is 0, the opacity is 1.
The caveat is that the rounded rectangle also has an offset that comes from the other scroll transition. On the trailing edge, this offset, combined with the clipShape, makes the text physically visible much later than what scrollTransition considers to be “visible”.
Consider the case where the text is just about to become physically visible. The text is shifted to the left at this point due to the offset scroll transition. The text’s frame and intersects with the frame of the scroll view (but is not physically visible because of clipShape). As a result, the opacity scroll transition will think the text is visible, and give you a phase value above 0.
Effectively, this means the text will not fade in from 0 opacity. The change in opacity can even be unperceivable if the opacity starts from too high a value. Since the text is extremely close to the leading edge, the latter is exactly what happens.
“red” is fading out, but since the frame of “yellow” is almost entirely within the scroll view’s frame (it might help to imagine what it looks like if it is not clipped by clipShape), it has a high opacity despite being barely visible.
If the text is close to the trailing edge instead, then the same problem would occur on the leading edge.
You can somewhat make it fade in “more” by insetting the scroll transition threshold:
.scrollTransition(.interactive.threshold(.visible.inset(by: itemWidth / 2))) { content, phase in
content.opacity(1 - abs(phase.value))
}
Note that insetting too much would cause the leading edge to fade out too quickly. That is just the asymmetric nature of the problem here.
To “properly” solve this problem, I think you can’t solely rely on scrollTransition. This is no longer solely about scrolling, but also “how much of the text is clipped by the clip shape”.