Using the mask modifier

The rope is not attached to anything – how can we fix that? Well, it’s easy: by adding two rope pieces and using a mask modifier to help them gradually fade out at the top.

Directly after the closing brace of the onAppear modifier for the left leg, add this code:

    //MARK: - ROPE
    ///right side rope masked
    Image("rope").resizable().aspectRatio(contentMode:
      .fit)
        .mask(LinearGradient(gradient: fadeOutRope,
          startPoint: .top, endPoint: .bottom))
        .frame(width: 57, height: 80)
        .offset(x: -189, y: -100)
    ///left side rope masked
    Image("rope").resizable().aspectRatio(contentMode...