Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
BPolak

(example) Infinity Scrolling with TweenMax

Recommended Posts

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>
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Hi Blake and Carl,

 

Many thanks for the feedback! 

Issue solved.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×