CODEWITHSUNDEEP
javascriptjqueryhtmlanimationfullpage.js
Dinocv
Dinocv

Reputation: 387

Re-animating in slide when navigated to: JavaScript

I have a one page website which makes use of full-screen slides(powered by fullPage.js).

I have this script running to animate some text when the page first loads (the first page is the one with animation) Im fairly new to JS so I was wondering how I would make it perform the animation every-time the user navigates to the slide?

JS: 

    $(document).ready(function() {
        $.fn.fullpage({
            slidesColor: ['#161616', '#161616'],
            anchors: ['', 'Bye']});

        $(".test").each(function(i) {
            $(this).delay(i*600).animate({ opacity: 1 }, 700)
        });         
    });
</script>

It just animates three spans. I'd like it to animate them again when I navigate back to the slide. Also how do I get it to set the opacity = 0 when navigated to another slide?(so that it can be reanimated

HTML:

<div class="section active" id="section0">
<h1>?</h1>
<h2><span class="test">1.</span> <span class="test">2.</span> <span class="test">3.</span></h2>
<a  onclick="javascript:window.location='#CV';"><img class="downArrow" src="images/arrow.svg"/></a>

CSS for .test:

   .test{
       opacity: 0;
   }

Upvotes: 1

Views: 129

Answers (1)

Dinocv
Dinocv

Reputation: 387

So here is how I did it. Notice I used fadeOut() to change the opacity, this was because changing the css opacity was unstable sometimes it wouldnt change all the elements.

<script type="text/javascript">

    $(document).ready(function() {

        $.fn.fullpage({
            anchors: ['1', '2'],

            afterRender: function(){
            //For the initial animation, aferLoad does not work.
                $(".test").each(function(i){
                    $(this).delay(i*600).animate({ opacity: 1 }, 900);
                });
            },

            afterLoad: function( anchorLink, index, slideAnchor, slideIndex){
            //When the first slide is navigated to perform animation.
                if(anchorLink == '1'){
                    $(".test").each(function(i){
                        $(this).delay(i*600).animate({ opacity: 1 }, 900);
                    });
                }
            },

            onLeave: function(index, direction){
            //When navigated away from first slide reset the opacity.
                if(index == '1' && direction == 'down'){
                    $(".test").fadeTo(400,0);
                }
            }
        });
    });
</script>

Upvotes: 1

Related Questions