Slide in animation

Support
#1

Hi

How to create that animation where when a user scrolls down the page, then text or images gets slided in from left or right

1 Like
#2

Hi @hrohibil,
there are some options how to implement scroll based animations, I personally prefer this one;

Step one
Download the ‘animation.css’ and copy it in your global css.
https://raw.githubusercontent.com/daneden/animate.css/master/animate.css
Paste it to Pro > Theme Options > CSS

Step Two
Paste the attached modified version of the viewport checker into the global JS (this version is working for all browsers)
Paste it to Pro > Theme Options > JS

(function($){
    $.fn.viewportChecker = function(useroptions){
        // Define options and extend with user
        var options = {
            classToAdd: 'visible',
            offset: 100,
            callbackFunction: function(elem){}
        };
        $.extend(options, useroptions);

        // Cache the given element and height of the browser
        var $elem = this,
            windowHeight = $(window).height();

        this.checkElements = function(){
            // Set some vars to check with
            var viewportTop = Math.max($('html').scrollTop(),$('body').scrollTop(),$(window).scrollTop()),
       viewportBottom = (viewportTop + windowHeight);

            $elem.each(function(){
                var $obj = $(this);
                // If class already exists; quit
                if ($obj.hasClass(options.classToAdd)){
                    return;
                }

                // define the top position of the element and include the offset which makes is appear earlier or later
                var elemTop = Math.round( $obj.offset().top ) + options.offset,
                    elemBottom = elemTop + ($obj.height());

                // Add class if in viewport
                if ((elemTop < viewportBottom) && (elemBottom > viewportTop)){
                    $obj.addClass(options.classToAdd);

                    // Do the callback function. Callback wil send the jQuery object as parameter
                    options.callbackFunction($obj);
                }
            });
        };

        // Run checkelements on load and scroll
        $(window).scroll(this.checkElements);
        this.checkElements();

        // On resize change the height var
        $(window).resize(function(e){
            windowHeight = e.currentTarget.innerHeight;
        });
    };
})(jQuery);

Step Three
Paste the animation settings into the global JS

jQuery(document).ready(function() {
    
	jQuery('.post').addClass("hidden").viewportChecker({
	    classToAdd: 'visible animated fadeInUp', // Class to add to the elements when they are visible
	    offset: 100    
	   });
});

You can add the animation by simply change ‘fadeInUp’ to any other animation used by animation.css
Examples here: https://daneden.github.io/animate.css/

Step Four
Now go to the element which you’d like to animate on scroll, select ‘customise’ and enter ‘post’ to the class section.

1 Like
#3

@hrohibil, we don’t provide customization in the forum especially a complex one like this. But, you may try the suggested workaround from @jannesth.

@jannesth, thanks for sharing :slight_smile:

#4

Hi @Rad,
I didn’t knew about it sorry about that, hope thats not an issue.

Hope it helps anyway, @hrohibil.
If somethings not working drop me a DM.

Regards

#5