AOS refresh not working with bootstrap tab element

[jpatelaxon]

Problem: First tab's animation works fine, then i show next tab using click action where i fire AOS.refresh() but animation wont work.

I havae tried following code(s) inside click action:

        setTimeout(function (e) {
            console.log('clicked');
            AOS.refresh(); //AOS.refreshHard();
        },10);

any suggestion be great.

My HTML:

<div class="service-slider-container">
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade" id="custom-web-design" role="tabpanel" aria-labelledby="custom-web-design-tab">
                            <div class="row align-items-center">
                                <div class="order-lg-1 order-2 col-xl-4 col-lg-6 col-md-12">
                                    <div class="slider-description-container">
                                        <h3 class="service-title slide-left animation-delay-1 aos-init aos-animate" data-aos="fade-right" data-aos-duration="1000" data-aos-easing="linear">Custom<br>Website Design</h3>
                                        <p class="slide-left animation-delay-2 aos-init aos-animate" data-aos="fade-right" data-aos-duration="1000" data-aos-easing="linear"><strong>Marketing doesn’t need to be complex, time-consuming, or expensive.</strong> We help companies optimize their marketing budget, increase leads, customers, and their bottom line, through guided marketing strategy and world-class marketing products.</p> <a href="/web-design-services/#services-web-design" class="btn btn-primary-flip fade-in animation-delay-3 aos-init aos-animate" data-aos="fade-right" data-aos-duration="1000" data-aos-easing="linear"><span data-hover="Learn More">Learn More</span></a>
                                    </div>
                                </div>
                                <div class="order-lg-2 order-1 col-xl-8 col-lg-6 col-md-12">
                                    <div class="slider-device-container">
                                        <div class="monitor-container">
                                            <div class="zoom-in aos-init aos-animate" data-aos="zoom-in">
                                                <div class="monitor"></div>
                                                <div class="monitor-image fade-in animation-delay-10 aos-init aos-animate" data-aos="zoom-in" data-aos-duration="2000" data-aos-easing="linear">
                                                    <div class="screen scroll-screen animation-delay-12" style="background-image: url(/wp-content/uploads/Axon-Software.jpg);">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade active show" id="video-photography" role="tabpanel" aria-labelledby="video-photography-tab">
                            <div class="row align-items-center">
                                <div class="order-lg-1 order-2 col-xl-4 col-lg-6 col-md-12">
                                    <div class="slider-description-container">
                                        <h3 class="service-title slide-left animation-delay-1 aos-init aos-animate" data-aos="fade-right" data-aos-duration="1000" data-aos-easing="linear">Video &amp;<br>Photography</h3>
                                        <p class="slide-left animation-delay-2 aos-init aos-animate" data-aos="fade-right" data-aos-duration="1000" data-aos-easing="linear"><strong>Increase your conversion rates with unforgettable imagery.</strong><br>
                                            Appeal to creatives and professionals alike by telling your story through captivating photography and cutting edge video.</p> <a href="/web-design-services/#services-video-photo" class="btn btn-primary-flip fade-in animation-delay-3 aos-init aos-animate" data-aos="fade-right" data-aos-duration="1000" data-aos-easing="linear"><span data-hover="Learn More">Learn More</span></a>
                                    </div>
                                </div>
                                <div class="order-lg-2 order-1 col-xl-8 col-lg-6 col-md-12">
                                    <div class="slider-device-container">
                                        <div class="projector-container">
                                            <div class="projector-top"></div>
                                            <div class="projector-screen-container">
                                                <div class="slide-down-masked">
                                                    <div class="projector-screen slide-down-mask"></div>
                                                    <div class="projector-screen-video fade-in animation-delay-10 aos-init aos-animate" data-aos="zoom-in" data-aos-duration="2000" data-aos-easing="linear">
                                                        <iframe src="https://player.vimeo.com/video/383803717?background=1" data-src="https://player.vimeo.com/video/383803717?background=1" class="window-load-video" frameborder="0" allow="autoplay;"></iframe>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="traditional-media" role="tabpanel" aria-labelledby="traditional-media-tab">
                            <div class="row align-items-center">
                                <div class="order-lg-1 order-2 col-xl-4 col-lg-6 col-md-12">
                                    <div class="slider-description-container">
                                        <h3 class="service-title slide-left animation-delay-1 aos-init aos-animate" data-aos="fade-right" data-aos-duration="1000" data-aos-easing="linear">Traditional<br>Media</h3>
                                        <p class="slide-left animation-delay-2 aos-init aos-animate" data-aos="fade-right" data-aos-duration="1000" data-aos-easing="linear"><strong>Marketing where you’d least expect it.</strong> Though we are seeing a shift to digital, traditional media and print still produce high conversion and allows your business to push the boundaries creatively while delivering your message.</p> <a href="/web-design-services/#services-traditional-print" class="btn btn-primary-flip fade-in animation-delay-3 aos-init aos-animate" data-aos="fade-right" data-aos-duration="1000" data-aos-easing="linear"><span data-hover="Learn More">Learn More</span></a>
                                    </div>
                                </div>
                                <div class="order-lg-2 order-1 col-xl-8 col-lg-6 col-md-12">
                                    <div class="slider-device-container">
                                        <div class="billboard-container">
                                            <div class="zoom-in aos-init aos-animate" data-aos="zoom-in">
                                                <div class="billboard"></div>
                                                <div class="billboard-worker fade-in animation-delay-15 aos-init aos-animate" data-aos="zoom-in" data-aos-duration="2000" data-aos-easing="linear" style="background-image: url(/wp-content/uploads/Cherry-Mannequin-Billboard-2019-Only-Mannequin.png)"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="digital-campaign" role="tabpanel" aria-labelledby="digital-campaign-tab">
                            <div class="row align-items-center">
                                <div class="order-lg-1 order-2 col-xl-4 col-lg-6 col-md-12">
                                    <div class="slider-description-container">
                                        <h3 class="service-title slide-left animation-delay-1 aos-init aos-animate" data-aos="fade-right" data-aos-duration="1000" data-aos-easing="linear">Digital<br>Campaign</h3>
                                        <p class="slide-left animation-delay-2 aos-init aos-animate" data-aos="fade-right" data-aos-duration="1000" data-aos-easing="linear"><strong>Direct your marketing to the clients that matter most.</strong> Memorable, measurable advertising tailored for audiences most likely to convert.</p> <a href="/web-design-services/#services-digital-campaigns" class="btn btn-primary-flip fade-in animation-delay-3 aos-init aos-animate" data-aos="fade-right" data-aos-duration="1000" data-aos-easing="linear"><span data-hover="Learn More">Learn More</span></a>
                                    </div>
                                </div>
                                <div class="order-lg-2 order-1 col-xl-8 col-lg-6 col-md-12">
                                    <div class="slider-device-container">
                                        <div class="tablet-container">
                                            <div class="zoom-in aos-init aos-animate" data-aos="zoom-in">
                                                <div class="tablet"></div>
                                                <div class="tablet-image fade-in animation-delay-10 aos-init aos-animate" data-aos="zoom-in" data-aos-duration="2000" data-aos-easing="linear">
                                                    <iframe src="https://player.vimeo.com/video/383803825?background=1" data-src="https://player.vimeo.com/video/383803825?background=1" class="window-load-video" frameborder="0" allow="autoplay;"></iframe>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="slider-footer">
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="slider-footer-title">Featured Services…</div>
                            </div>
                            <div class="col-lg-9">
                                <ul class="slider-nav nav" id="pills-tab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link" id="custom-web-design-tab" data-toggle="pill" href="#custom-web-design" role="tab" aria-controls="pills-home" aria-selected="false">Custom Web Design</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link active" id="video-photography-tab" data-toggle="pill" href="#video-photography" role="tab" aria-controls="video-photography" aria-selected="true">Video &amp; Photography</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="traditional-media-tab" data-toggle="pill" href="#traditional-media" role="tab" aria-controls="traditional-media" aria-selected="false">Traditional Media</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="digital-campaign-tab" data-toggle="pill" href="#digital-campaign" role="tab" aria-controls="digital-campaign" aria-selected="false">Digital Campaigns</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

[tejassrivastava]

@jpatelaxon

I Found this solution to be working in React/NextJS. Whenever the user switches bootstrap navs tab.

 useEffect(()=>{
        if(typeof window !== 'undefined' && typeof document !== 'undefined'){

            let tabEl = document.querySelector('button[data-bs-toggle="tab"]')
            tabEl.addEventListener('hidden.bs.tab', function (event) {

                AOS.refreshHard();
            })
            tabEl.addEventListener('shown.bs.tab', function (event) {

                   AOS.refreshHard();
               })

         }
      })

Bootstrap Version : 5.1.0 React Version : 17.0.1