Two animated yaxis

Iโ€™d like to show the power and soc of a tesla supercharging at two different sites in an animated graph. Iโ€™m having trouble getting the second axis to work with itโ€™s own scale. Any help would be greating apprecated! Thank you!

code:

df1 = pd.DataFrame(data=final_df)
df2 = pd.DataFrame(data=final_df2)

df = pd.concat([df1, df2], axis=0)

#fig = px.bar(df, x="Charger Version", y="SoC", color="Charger Version",
#  animation_frame="time", animation_group="Charger Version", range_y=[0,100])

frames = []
df.Power = df.Power * -1
df2 = df.loc[df['Charger Version']=='V2']
df3 = df.loc[df['Charger Version']=='V3']
for i in range(1, df.__len__()):
    frames.append(
        go.Frame(
        data=[go.Scatter(x=df2.time[0:i], y=df2.SoC[0:i], name='V2_SoC', yaxis='y1'), go.Scatter(x=df3.time[0:i], y=df3.SoC[0:i], name='V3_SoC', yaxis='y1'),
              go.Scatter(x=df2.time[0:i], y=df2.Power[0:i], name='V2_Power', yaxis='y2'), go.Scatter(x=df3.time[0:i], y=df3.Power[0:i], name='V3_Power', yaxis='y2')],
        )

                   )
fig = go.Figure(
    data=[go.Scatter(x=df2.time[0:0], y=df2.SoC[0:0], name='V2_SoC', yaxis='y1'), go.Scatter(x=df3.time[0:0], y=df3.SoC[0:0], name='V3_SoC', yaxis='y1'),
          go.Scatter(x=df2.time[0:0], y=df2.Power[0:0], name='V2_Power', yaxis='y2'), go.Scatter(x=df3.time[0:0], y=df3.Power[0:0], name='V3_Power', yaxis='y2')],
    layout=go.Layout(
        xaxis=dict(range=[0, 28], autorange=False),
        yaxis=dict(range=[0, 70], autorange=False),
        yaxis2=dict(range=[0, 170], autorange=False, side='right'),
        title="SoC vs Time",
        updatemenus=[dict(
            type="buttons",
            buttons=[dict(label="Play",
                          method="animate",
                          args=[None])])]
    ),frames=frames
)
fig.update_layout(xaxis_title='Time ( Minutes )', yaxis_title='SoC / Power ( % / KW )', transition_duration =100)

fig.show()