Streaming live at 10am (PST)

Pricing page toggle animation, but on text element

I found this template in another forum to get the toggle button and toggle animation on my own pricing page:

https://preview.webflow.com/preview/pricing-page-w-toggle?utm_medium=preview_link&utm_source=showcase&utm_content=pricing-page-w-toggle&preview=01f1c5ad495d26b65d24fbb80ffbb0de

I would love to have that same animation, but for when you click on the text option (to the left or to the right of the toggle button).

It’s proving more difficult as I thought it would essentially be the same element trigger I created, just on the text element, but it is not working as planned.

Any thoughts?

https://preview.webflow.com/preview/pricing-page-w-toggle?utm_medium=preview_link&utm_source=showcase&utm_content=pricing-page-w-toggle&preview=01f1c5ad495d26b65d24fbb80ffbb0de

There is an “Interaction” applied to the “Toggle Contain” element. You just need to apply the same animation to the two text blocks highlighted in the screenshot.

Select the element called “Toggle Text” and in the Interactions Panel add “Element Trigger>Mouse Click (Tap)” Then click “On First Click>Action>Start An Animation” select “Pricing Toggle”.

Repeat this for the second Text element but for that one select select “Pricing Toggle 2”.

That’s what I had originally thought, but the animation doesn’t quite work like that based on the way the interactions are set up.

When I just use Pricing Toggle interaction on the text, it only does half of the animation. Plus, if you were to click that text again, nothing happens because it only accounts for “First Click”

Interesting. My take on this was that you wouldn’t need to toggle back and forth on the same text. I was thinking one click for the monthly billings text and one click on the yearly billings text would be better.

hi @adevlin7 here is short video with brief preview “how to”

1 Like