(example) Infinity Scrolling with TweenMax

October 15, 2014

Infinity Scrolling: load the image when it’s (about to appear) in viewport.

Excellent for loadspeed.

To show the loaded image with nice effect, we use GreenSock!

Link to demo

http://front-end.codes/gsap/infinity/

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta author="Benny Polak"/>
    <title>Infinity Scrolling</title>     
    <style>
        body { margin: 0; padding: 0; }
        #information {
        position: fixed;
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 11px;
        background-color: #333;
        color: white;
        border-bottom: 1px solid black;
        font-family: tahoma, arial;
        z-index: 999;
        }
        #infinity-container {
        padding-top: 150px;
        position: relative;
        width: 353px;
        height: auto;
        margin: 0 auto;
        }
        p {
        margin-left: 40px;
        }
        .newImage {
        opacity: 0;
        }
    </style>
</head>
<body>
    <!-- HTML -->
    <div id="information">
        <p>Dev: Benny Polak<br />
        <strong>Infinity Scrolling with GreenSock</strong><br /><br />
        Try it: scroll down<br /><br />
        Images loaded and deployed in the DOM: <span id="image-count"></span></p>
    </div>
    <div id="infinity-container">
        <!-- Images will be deployed here by JavaScript -->
    </div>
    <!-- // HTML -->
     
    <!-- JavaScript -->
    <script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script>
    (function($){
        var InfinityScroll = new Object(), m_ = 'model', v_ = 'view', c_ = 'controller';
        InfinityScroll.model = {
            imageWidth:     353,
            imageHeight:    256,
            totallImages:   26,
            lastLoaded:     0
        }
        InfinityScroll.view = {
            loadNextImage: function() {
                InfinityScroll[m_].lastLoaded++;
                var imageId = Math.floor(Math.random() * 1E20);
                if (InfinityScroll[m_].totallImages >= InfinityScroll[m_].lastLoaded) {                
                    InfinityScroll[v_].insertImage(imageId);

                    TweenMax.to($("#image-"+imageId), 2, {
                        opacity:            1,
                        rotation:           360, 
                        ease:               Back.easeOut,
                        transformOrigin:    "left top"                  
                    })   
                }
            },
            insertImage: function(imageId) {
                $('<img class="thisImage newImage" style="width: '+InfinityScroll[m_].imageWidth+'; height: '+InfinityScroll[m_].imageHeight+'; " id="image-'+imageId+'" src="images/'+InfinityScroll[m_].lastLoaded+'.jpg">').appendTo($("#infinity-container"));

                $("#image-count").text(InfinityScroll[m_].lastLoaded);
            }
        }
        InfinityScroll.controller = {
            init: function() {
                InfinityScroll[c_].trackClient();
            },
            trackClient: function() {
                var totalImagesHeight = $(".thisImage").length * InfinityScroll[m_].imageHeight;
                var currentViewport_bottom = ($(window).height() + $(window).scrollTop())
                if ( totalImagesHeight < currentViewport_bottom ) {
                    var missingImages = parseInt( ( (currentViewport_bottom - totalImagesHeight) / InfinityScroll[m_].imageHeight ) * 2);
                    for (var i = 1; i <= missingImages; i++) {
                        if (InfinityScroll[m_].totallImages >= InfinityScroll[m_].lastLoaded) {
                            InfinityScroll[v_].loadNextImage(); // insert one image - no tweening

                        }
                    }
                }
                setTimeout(InfinityScroll[c_].trackClient, 10);  
            }
        }
        $(document).ready(InfinityScroll[c_].init);
    })(jQuery)
    </script>
    <!-- // JavaScript -->
 </body>
</html>

October 16, 2014

On a large screen it won't start unless you resize it.

October 16, 2014

Hey B,

Another nice effect. Glad to see you put GSAP to good use and are sharing with the community.

Keep 'em coming.

And to elaborate on Blake's note, I'm on a 2560 x 1440 monitor and had to shrink my browser window to enable the scrolling.

Carl

October 16, 2014

Hi Blake and Carl,

Many thanks for the feedback!

Issue solved.

Notifications

Messages

(example) Infinity Scrolling with TweenMax

Warning: Please note

Recommended Posts

BPolak

OSUblake

Carl

BPolak

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members