CODEWITHSUNDEEP
jquerycssanimationviewporthorizontal-scrolling
Loky
Loky

Reputation: 29

Viewport trigger css animation (horizontal website)

I'm trying to make a horizontal touch friendly website using "swiper.js"...

I made some really simple css animations, and I would like to trigger those animations everytime these come into the viewport! like the "css3-animate-it.js" but in an horizontal way! (I tried it but it doesn't seem to work).

The animation works fine, just two thing:

a. all the animations (on slide 2,3...) start in same time, so no animation when arriving on slide 2,3...! b. when coming back on slide 1, I need the animation "restart" again...

Thanks a lot for your help!

The "swiper" layout look like that...

<div class="swiper-container">
<div class="swiper-wrapper">
    <div class="swiper-slide">
       <div class="brandwrap">
         <div class="logo"><img></div>
         <div class="brand moveup">example brandname</div>
         <div class="slogan moveup">example slogan</div>
       </div>
    </div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-pagination moveup"></div>
</div>

In case, I put the animation css and the Swiper js trigger code.

Anime CSS:

.moveup{-webkit-animation-name:movingup;animation-name:movingup;-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;}
@-webkit-keyframes movingup{
from {opacity:0;-webkit-transform:translate(0, 90%);transform:translate(0, 90%);}
to{opacity:1;-webkit-transform:translate(0, 0);transform:translate(0, 0);} }
@keyframes movingup{
from {opacity:0;-webkit-transform:translate(0, 90%);transform:translate(0, 90%);}
to{opacity:1;-webkit-transform:translate(0, 0);transform:translate(0, 0);} }

Swiper JS (code in my main.js):

var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    slidesPerView: 1,
    mousewheelControl: true
});

Edit:

I tried with "viewport-checker" (and the animate.css library) aswell but same same! The animation start on slide 1, not on slide 2 and the animation are not reset!

For the html part, all the the div I want to move look like that:

<div class="brand animh">Brand Name</div>

I put that in the css:

.animv{opacity:1;}
.animh{opacity:0;}

And the js trigger code is :

$(document).ready(function () {
    $('.animh').viewportChecker({
        classToAdd: 'animv animated fadeInUp',
        classToRemove: 'animh',
        removeClassAfterAnimation: true, // I tried without.
        repeat: true,
        scrollHorizontal: true
       });
});

Please any help? Thanks a lot!

Upvotes: 2

Views: 1261

Answers (2)

BenFictional
BenFictional

Reputation: 11

This helped me out a lot! I was using FullPage.js but the same concept applied. I was even able to trigger the addClass function without the need of viewportChecker (my site uses a horizontal layout with slides, so scroll events weren't working anyway). The documentation for fullPage.js lists the afterSlideLoad event and some others that could be useful for anyone working on something similar. Here's the code I ended up with:

<script> 
            $(document).ready(function() {
                $('#fullpage').fullpage( {
                    paddingTop: '4em', 
                    responsiveHeight: '700',
                    slidesNavigation: true,
                    slidesNavPosition: 'bottom',
                    anchors:['firstPage', 'secondPage', 'thirdPage'],
                    afterSlideLoad: function(anchorLink, index){
                        //Add class
                        $( ".animate").addClass( "visible" ).delay(2000);
                    },
                    onSlideLeave: function(anchorLink, index){
                        //Remove class
                        $(".animate").removeClass("visible").delay(2000);
                    }

                });
            });
    </script>

Upvotes: 1

Loky
Loky

Reputation: 29

Ok... After trying many things such as "waypoints.inview", I came back to "viewport-checker" and found a solution. (And like everytime, I have this odd voice in my head saying: "Why I didn't thought about that before..." ^^)

So. In "Swipper" there are a shit load of parameters (see the API), one interesting in that case is the "onSlideChangeEnd". It callback a function, that will be executed after the slide animation!! So I use it to call the "viewportChecker" function.

The Swipper init and viewportChecker init code fusion to become:

var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        direction: 'horizontal',
        slidesPerView: 1,
        mousewheelControl: true,
        keyboardControl: true,
        onSlideChangeEnd: function() { //you can use onTransitionEnd aswell
            $('.anim').addClass('animh').viewportChecker({
        classToAdd: 'animv moveup', // you can use classToAddForFullView aswell
        classToRemove: 'animh',
        offset: 100,
        repeat: true,
        scrollHorizontal: true
       });},
    });

Thanks to Dirk Groenen for his jQuery-viewport-checker script !!

Upvotes: 0

Related Questions