I currently added a pretty nifty way to add a “Agree to Terms” button to my eCommerce checkout page. I hide the button until the customer clicks on the Agree to Terms button. The issue is that I want to reverse that process to where if the customer were to deselect the button, I want to hide the button. I tried to create it and was able to successfully view the effect within the designer but the site will not show the desired effect on the published version.
This may have something to do with the Initial State for the purchase button to be “Hide” followed by on-click > Opacity+Move+Show Button. When I try and to reverse this effect (customer clicks the agree to terms box again to deselect) the button is completely hidden from the site.
Summary:
– Define CLICK-ON to trigger button tweening sequence.
– Define CLICK-OFF to trigger button tweening in reverse.
– Define your INITIAL state with the SECOND-OFF click, not on FIRST-ON click.
Awesome! Thanks @miekwave! After troubleshooting it a bit more, I discovered that the div wrapper that contained my embed block for the checkbox was the trigger and I wasn’t clicking that element to trigger the interaction. Long story short, I recreated the animated checkbox with interactions and scrapped the embed block to have more control over the clickable element.
Works like a champ! Your video and input played a crucial step in dissecting this a bit further so thanks again!