Change Header Minicart container effect from dropdown to slide(right to left) in magento2

override minicart.phtml file from vendor/magento/module-checkout/view/frontend/templates/cart/minicart.phtml to my theme and added below code at thee end of file

<script type="text/javascript">
     require(['jquery'], function($){ 
        $(document).ready(function(){
            $("[data-block='minicart']").on("dropdowndialogopen", (e) => {
                $(".block-minicart").hide();
                $(".block-minicart").slideDown("slow");                 
            });
            $("[data-block='minicart']").on("dropdowndialogclose", (e) => {
               $(".mage-dropdown-dialog").show();
               $('.block-minicart').slideUp("slow");
            });
        });
 });
</script>

You can add jQuery UI options “show” to do animate effect:

    <?php if ($block->getIsNeedToDisplaySideBar()): ?>
    <div class="block block-minicart empty"
         data-role="dropdownDialog"
         data-mage-init='{"dropdownDialog":{
            "appendTo":"[data-block=minicart]",
            "triggerTarget":".showcart",
            "timeout": "2000",
            "closeOnMouseLeave": false,
            "closeOnEscape": true,
            "triggerClass":"active",
            "parentClass":"active",

            "show":{"effect":"slide", "duration":800},

            "buttons":[]}}'>
        <div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
            <!-- ko template: getTemplate() --><!-- /ko -->
        </div>
        <?php echo $block->getChildHtml('minicart.addons'); ?>
    </div>
<?php endif ?>