I'm trying to re-create my app, originally created UIKit and Objective-C back in 2009, using SwiftUI. I have a view animated like this:

[self.phaseCell.layer addAnimation:[AnimationManager transitionFromRight] forKey:@"From Right"];

And here is the animation code:

+ (CATransition *)transitionFromRight
{
    return [AnimationManager animation:kCATransitionFromRight];
}

+ (CATransition *)animation:(NSString *)direction
{
    CATransition *animation = [CATransition animation];
    [animation setDelegate:(id<CAAnimationDelegate>)self];
    [animation setType:kCATransitionPush];
    [animation setSubtype:direction];
    [animation setDuration:0.5f];
    [animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];

    return animation;
}

The question is: is it possible to achieve the same effect in SwiftUI?

Sasha shares some ancient code then asks:

Is it possible to achieve the same effect in SwiftUI?

Yikes that Objective C code is scary, Saturn return-type stuff! It's a great advertisement for adopting SwiftUI!

Is it possible? First it's hard to decode what the old code is doing. Lacking a full stellium, I'm left to guess that this code animates text to simulate it sliding on screen from the right side? For fun, you added some variables for delays?

(Hint: save a JPEG of the animation and provide a link in your post!)

But without even seeing a working sample, I'll go out on a limb and suggest you look at examples using matchedGeometryEffect()

With a bit more retrograde it could be similar to the MagicMove effect in KeyNote. But in the realm of creation it's quite possible!

@twoStraws wrote a decent article about matchedGeometryEffect(). Bonus he even used a star example! (Taylor Swift)

See -> Slick Transition

Here is what this animation does:

Sasha found a solution in another web site, but stopped short of understanding it.

Unfortunately, I don't have a clear idea of the details of how this code works

Don't give up! This is a learning forum. Try the Rubber Duck 🐤 technique.

I've pasted the magic part of the code below.
The variable index holds the current moon phase (0, 1, 2, 3, or 4) Notice how index is in both the Image and the Text views? This is important. Whenever the index changes, the HStack must redraw itself based on the new value of index.

So, grab a piece of paper and draw for yourself.
What does the HStack look like when the value is 3? Draw it!
What does the HStack look like when the value is 4? Draw this also!
Put your two drawings side-by-side.

The magic occurs with the transition modifier!
As the old HStack is removed, it is moved towards the .leading edge and fades out. At the same time, the new HStack is inserted into the view. It moves in from the .trailing edge, and fades in.

These two transitions work together making a smooth motion animation.
Way cool.

// ---- @ChrisR provides the solution
// ---- snip ---------
    HStack {
        Image(systemName: phases[index].image)    // This draws the moon graphic
        Text(phases[index].name)                  // next to the moon phase text.
    }
    .id(index)
    .frame(maxWidth: .infinity)
    .transition(.asymmetric(insertion: .move(edge: .trailing ).combined(with: .opacity),      // new view is inserted
                            removal:   .move(edge: .leading  ).combined(with: .opacity)))     // old view is removed