Jump to content
Search Community

(example) Infinity Scrolling with TweenMax

BPolak test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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

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.
×
×
  • Create New...