Reveal elements when scrolling using Owl Carousel animate js

Question

I'm using owl carousel on my website for fadeIn effect. its working but when i scroll the screen i cant see the animation until i refresh the page, i need to refresh for every page.. without reloading i want to see my animations for every sections. please give some suggestion.. i added cdn library also i dont know which error

<link rel="stylesheet" type="text/css"
    href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
    integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link rel="stylesheet" type="text/css"
    href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<link rel="stylesheet" type="text/css"
    href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<script src="https://kit.fontawesome.com/da01f010f2.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css"
    href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">

    <div class="container">
        <div class="row">
            <div class="col-md-12 wow fadeInUp animated" style="visibility:visible;">
                <div class="section-heading text-center pb-65">
                    <label class="sub-heading">What is Cryptcon</label>
                    <h2 class="heading-title">How It Works</h2>
                    <p class="heading-desc">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium
                        quam eos odit magnam iste, soluta quis incidunt esse voluptatum eum, voluptates ipsa
                        voluptas ducimus laboriosam culpa est facere possimus pariatur.</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 text-center flex-align justify-center wow fadeInLeft animated"
                style="visibility: visible;">
                <div class="work-box">
                    <div class="work-box-bg"> </div>
                    <img src="images/work-process.png" alt="rotation" class="rotation-img">
                </div>
            </div>
            <div class="col-md-6 flex-align wow fadeInRight animated" style="visibility: visible;">
                <div class="work-box">
                    <h3 class="work-process-title pb-25">we've built a platform to buy and sell shares.</h3>
                    <p class="work-desc pb-20">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure dolorem
                        recusandae accusamus nisi commodi facilis numquam autem rem, mollitia similique corporis
                        impedit explicabo cumque, esse harum. Facilis esse ipsum est?</p>
                    <ul class="check-list">
                        <li>
                            <span>&#10003</span>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
                        </li>
                        <li>
                            <span>&#10003</span>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
                        </li>
                        <li>
                            <span>&#10003</span>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="feature-part skyblue bg-pattern pt-100 pb-10">
    <div class="container">
        <div class="row">
            <div class="col-md-12 wow fadeInDown animated" style="visibility: visible;">
                <div class="section-heading text-center pb-65">
                    <label class="sub-heading">crypton feature</label>
                    <h2 class="heading-title">Best Feature</h2>
                    <p class="heading-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut debitis
                        quis, totam corrupti eligendi quibusdam, eum iure veritatis eius soluta consequuntur
                        perspiciatis exercitationem nesciunt dolores, vitae nostrum ex recusandae perferendis!</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 wow fadeInDown pb-80 animated" style="visibility:visible;">
                <div class="feature-box">
                    <div class="feature-icon">
                        <img src="images/feature-1.png" alt="feature">
                    </div>
                    <div class="feature-contain pt-25">
                        <a href="feature.html" class="feature-title">early bonus</a>
                        <p class="feature-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat
                            doloribus sunt reiciendis odio deleniti reprehenderit ratione facere nisi suscipit
                            eligendi! Distinctio fugit nam officia ipsam temporibus non nihil pariatur laboriosam?
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 wow fadeInDown pb-80 animated" style="visibility:visible;">
                <div class="feature-box">
                    <div class="feature-icon">
                        <img src="images/feature-2.png" alt="feature">
                    </div>
                    <div class="feature-contain pt-25">
                        <a href="feature.html" class="feature-title">universal access</a>
                        <p class="feature-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat
                            doloribus sunt reiciendis odio deleniti reprehenderit ratione facere nisi suscipit
                            eligendi! Distinctio fugit nam officia ipsam temporibus non nihil pariatur laboriosam?
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 wow fadeInDown pb-80 animated" style="visibility:visible;">
                <div class="feature-box">
                    <div class="feature-icon">
                        <img src="images/feature-3.png" alt="feature">
                    </div>
                    <div class="feature-contain pt-25">
                        <a href="feature.html" class="feature-title">secure storage</a>
                        <p class="feature-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat
                            doloribus sunt reiciendis odio deleniti reprehenderit ratione facere nisi suscipit
                            eligendi! Distinctio fugit nam officia ipsam temporibus non nihil pariatur laboriosam?
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 wow fadeInUp pb-80 animated" style="visibility:visible;">
                <div class="feature-box">
                    <div class="feature-icon">
                        <img src="images/feature-4.png" alt="feature">
                    </div>
                    <div class="feature-contain pt-25">
                        <a href="feature.html" class="feature-title">low cost</a>
                        <p class="feature-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat
                            doloribus sunt reiciendis odio deleniti reprehenderit ratione facere nisi suscipit
                            eligendi! Distinctio fugit nam officia ipsam temporibus non nihil pariatur laboriosam?
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 wow fadeInUp pb-80 animated" style="visibility:visible;">
                <div class="feature-box">
                    <div class="feature-icon">
                        <img src="images/feature-5.png" alt="feature">
                    </div>
                    <div class="feature-contain pt-25">
                        <a href="feature.html" class="feature-title">safe & secure</a>
                        <p class="feature-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat
                            doloribus sunt reiciendis odio deleniti reprehenderit ratione facere nisi suscipit
                            eligendi! Distinctio fugit nam officia ipsam temporibus non nihil pariatur laboriosam?
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 wow fadeInUp pb-80 animated" style="visibility:visible;">
                <div class="feature-box">
                    <div class="feature-icon">
                        <img src="images/feature-6.png" alt="feature">
                    </div>
                    <div class="feature-contain pt-25">
                        <a href="feature.html" class="feature-title">several profit</a>
                        <p class="feature-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat
                            doloribus sunt reiciendis odio deleniti reprehenderit ratione facere nisi suscipit
                            eligendi! Distinctio fugit nam officia ipsam temporibus non nihil pariatur laboriosam?
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.3.4.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"
    integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2"
    crossorigin="anonymous"></script>
<script type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.2/umd/popper.min.js"></script>

its working but when we scroll to next page means feature page i gave the animations for all the pages but i need to refresh the page to see the animations... but i need to see the animations for when i scroll the next page i have to see without refreshing the page — Kalai-UI, Feb 18 '22 at 07:18
There's no enough information in your question to answer this IMO. Too many ways to do what you describe to give you a solution — K Scandrett, Feb 18 '22 at 07:21

Reveal elements when scrolling using Owl Carousel animate js

0 Answers0