Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › JavaScript › Why is this animation jumping when first scrolled?

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • September 30, 2013 at 4:57 pm #151746
    nixnerd
    Participant

    Can anyone take a look at this example/code and tell me why it’s jumping?

    Your help is GREATLY appreciated.

    Example:

    https://googledrive.com/host/0B4n4B8hVgqfhYl9xdTVJR0VLcUk/index.html

    <!DOCTYPE HTML>

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Joe Templeton | Dev + Design</title>
</head>

<body>

    <header>
    </header>

    <section id="container">

        <article id="home">

            <div id="homeplus">
                <div id="logo">
                    <img id="joe" src="logowhite.svg">
                    <h1>Dev + Design + Denver</h1>
                </div>  

                <img id="plus" src="plus.svg">

            </div>
        </article>

    </section>

        <section>

        <article id="one">

        </article>

    </section>

    <footer>
    </footer>

    <script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
    <script src="js/jquery.superscrollorama.js"></script>

    <script>
        $(document).ready(function() {
            var controller = $.superscrollorama();

                // parallax example, setting duration ties animation to scroll position
                // you can target a scroll position instead of an element (whose position can change)
                controller.addTween(
                    '#homeplus',
                    (new TimelineLite())
                        .append([
                            TweenMax.fromTo($('#plus'), 1, 
                                {css:{top: 500}, immediateRender:true}, 
                                {css:{top: -200}})
                        ]),
                    1000// scroll duration of tween
                );

            });
    </script>

</body>

</html>
    October 3, 2013 at 2:41 pm #151972
    nkrisc
    Participant

    What is the intended behavior?

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.