animated sign-up flow
June 24, 2015 | 16 Feedbacks

Animated Sign Up Flow

A pricing table that animates into a sign up form once the user selects a plan.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

Designing a checkout process is never easy, there’s no universal recipe. If you’re offering different product plans, your users will have to navigate through a pricing table first. We created a snippet for responsive pricing tables already. This time we tried to focus on what’s next: what happens when the user selects a plan.

In most cases, you’ll redirect your users to a sign up page. However, if your checkout process is quite simple, an alternative approach would be to animate the pricing table, and show the checkout form right away, in the same page. This is what we tried to achieve with today’s snippet.

Enough talking, let’s dive into the code ;)


Creating the structure

The html structure is composed by 2 main elements: the, which is the pricing table, and the, which is the form modal window.

Each plan includes a header with the plan title and price, a with a list of features and a footer with a call-to-action button.

The form structure is quite straightforward. Just one note: there’s an empty element, that will be filled using jQuery with the plan info selected by the user (basically with a clone of and .cd-pricing-features).

Adding style

CSS for this resource is quite simple. Just some hints: the class .empty-box is added to the .cd-pricing > li item when the form becomes visible. Since we clone the entire list item (and place it inside the form), the original one is still there. In this case, we used the .empty-box class to hide the original list item.

We use the .empty-box class also to target the action button in the footer, so that it animates back when the user closes the form (from scale(0) to scale(1)).

The is in position: fixed; and it doesn’t have a size by default. When the user taps/clicks on the select button, we make the form visible (from visibility: hidden; to visibility: visible;), assign it the same size of the pricing list item, and animate it by making it bigger. This creates the illusion that it’s the pricing item itself that enlarges, while it’s the, that has the same size and contains the same elements (clones – that then move to make space for the sign up form).

One last detail worth mentioning: when the form becomes visible, the green background of the plan title animates to become the background of the features list as well (desktop only). That is actually a different element (.cd-form .cd-pricing-features::before) whose height is animated (using the scale transformation).

Events handling

The animateForm() function has been defined to animate the modal form: when a user selects a plan, the function evaluates the position and dimension of the selected pricing table item and assign them to the .cd-form so that it completely covers the pricing item (which is hidden using the .empty-box class).

Then the animation starts: we animate the .cd-form width and height to its final values and translate it so that it’s centered in the viewport.

When the user closes the modal, the form fieldsets are hidden (changing their opacity to 0) and then the reverse animation is performed (the delay for the animation is defined using the delay variable).


June 24, 2015
  • Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

  • tisamayacom

    Thanks. Very good.

  • Anon


  • Asep Irman

    Great, Amazing (y)

  • Francesca Fuladuf Primo

    So cool! Great job guys! :)

  • Remi

    Hi guys, I have to admit I have always been a huge fan of what you do, and this post is pretty awesome. I think i’ll extend this post to explain how people can combine it with WooCommerce + Subscriptions. The final result should great!

    • Chad Rankin

      I second that complimentary notion, as my discovery upon the great work of CodyHouse has only been realized a few weeks ago. They are an excellent fixture to the world of web design, indeed.

    • Sebastiano Guerriero

      thanks for the kind words! @remicorson:disqus @chad_rankin:disqus

  • reza haidari

    beautiful, thnaks for tut.

  • Clarice

    exactly what I was looking for. Huge help. Thanks

  • Éder Costa

    Great job!!!

  • yhagio

    Wow! So beautiful! Thank you for sharing

  • Nishad Nazar

    I want know that how can a popup opened as a separate div(As here it open up the same div). It would be a great help.thank you

  • محمد


    how to get price ( set price number to hidden input in to this form) number using multi plan ?

  • Debabrata Paul

    I’ve found the templates ,codes and menus useful and the works are highly praiseworthy.I’ve tried my level best to modify and develop as per need.Thank you for your contribution.I’ve learnt a lot. I’m willing to be a Web designer and developer.Your support is highly expected.Debabrata Paul.Headmaster.

  • segunoyebode

    what if you want to reduce the size of the expand box e.g top: 20.55px
    to top: 120.55px, and give it different details instead of the forms i
    am trying to use it for products view thanks in advance?

  • Axell Gun

    How to make that popup auto load when page load??