Woocommerce - Dynamlically Change Product Image Based on Selected Options

We have a woocommerce store that uses gravity forms. We are looking for a function or action to be written to change the product image dynamically based on the options selected by the user for that particular product. Once the user starts to change options the image must change immediately, we do not want the page to refresh after each selection so please allow for this in your proposal. Once the user adds the product to the cart, the image shown must be the image that is used for the product as this will shows as a thumbnail in the cart. We would also like to be able to change the form field names and values ourselves so we would like the code written with that in mind. The code will also need to be easy to follow/change if needed. Final code must be as condensed as possible as we are monitoring the sites page score daily. We will provide server access and a typical product so we can test the code works before marking the project as complete. Woocommerce actually has this feature already available for product variations however as we are using gravity forms for the variations this isn’t available to us. Originally we were looking to use image layers to save creating new images for each variation. Layers would suit us better if possible but this isn't a necessity. We will also consider use of any php image library or jQuery with CSS/HTML if required. We will also provide all image variations when required however while developing any sample images can be used and changed later.