Jump to content
Search Community

Superscrollorama, stop page scroll while animating a section

idrumgood 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

I'm trying to use Superscrollorama to animate some stuff on a webpage. The content only animates inside a specific div on the page, so I want the user to be able to scroll the page normally until that section is reached, then pause the page scrolling while keeping the scrollable animation. Once the animation has completed, they would continue scrolling down the page.

 

I've tried using the pin functionality, but my div that contains the animations stays put while the rest of the page still scrolls. So I set it to pin the whole content of the page, and adjusted the offset so it wouldn't start until the user got to the animated section. This seems to be the right direction, but when I get to that scroll point, it jumps me back to the top of the page for some reason. If I jerk the scroll bar down past that point it seems to sort of work.

 

Here's my code I have thus far:

 

var controller = $.superscrollorama(),
        animatedContent = $('#content');


    controller.pin(animatedContent, 1000, {
      anim: (new TimelineLite())
        .append(
          TweenMax.to($('#water_color'), .5, {css:{height:0}})
        ),
      offset: 400
    });

And the HTML looks like this

 

<body id="whats_new" includeLocalCSS="true" includeLocalJS="true" class="innovation reflex wide">
    <section class="hero_area">
      <div class="image_background">
        <img src="fake.jpg">
      </div>
      <div class="hero_overlay">
        <div class="container_12">
          <section class="demo top_blue_border grid_12">
            <div id="animated_content">


              <div id="text_intro" class="animation_copy">
                <h2 class="type-light">Engineered to<br>Move with You</h2>
                <div class="top_blue_border"></div>
                <p>blah blah</p>
              </div>


              <div id="water_color">
                <img id="blue_bar" src="sample.png" alt="">
              </div>


              <div id="base_image">
                <img src="sample.jpg">
              </div>


            </div>
          </section>
        </div>
      </div>
    </section>
  </body>

The animated content div is where the animations actually happen and are about 600 pixels down the page.

 

 

Link to comment
Share on other sites

Unfortunately Superscrollorama is a 3rd party tool created by [the very talented] John Polacek and we just don't have the bandwidth to support other tools that we didn't create. We need to keep these forums focused on GreenSock-specific questions. Maybe try posting in the github issues area for that project. 

 

If anyone else has pointers, please do post here. 

Link to comment
Share on other sites

Hi,

 

As far as I know and doing a couple of searches in google (not too deep so I'd suggest you to dig a little more) preventing the page from scrolling is not an easy task and not something too many people has done.

 

The most reliable way I can think of is using GSAP's scrollTo plugin and a set() instance to tween the scroll position to a certain value while the tween is executing and once the tween has completed release it, so the user can keep scrolling. You can see it here:

See the Pen FhJrH by rhernando (@rhernando) on CodePen

 

The only flaw in this sample is that if the user scrolls up with the scroll bar the element gets out of the view.

 

Another choice would be to set the container to a determinated height so the window scroll would reach it's max keeping element that's going to be animated at the center of the screen (you'll need to get some code into that but is not too complicated with JQuery) and once the animation is completed tween the height of the container to it's normal size. Keep in mind that this should be done after the entire DOM is ready, otherwise scrollorama might not work as expected, so you should get the document height, the window height and the element offset, then set the container's height to avoid scroll beyond the element and once the animation is complete reset the container's height; it might sound complicated but is not, just look for the right functions in JQuery, you could use this function sheet:

http://www.oscarotero.com/jquery/

 

Hope this helps,

Cheers,

Rodrigo.

Link to comment
Share on other sites

hey you can do it with the superscrollorama PIN IT!

 

Check our new website that's what we are building! http://techiesplus.com

 

You just scroll down to the div where the animation will be displayed, as soon as the top of the div get to the top of the browser it will pin it making its position fixed and its width and height can be 100% so that the animation will cover the browser completely.

 

Here is an example using superscrollorama, TweenMax and TimelineLite

 

It still is work in progress!

 <script type="text/javascript">
        $(document).ready(function () {
            var controller = $.superscrollorama({
                playoutAnimations: false,
                triggerAtCenter: true
            });
            //controller.addTween('#fly-it', TweenMax.from($('#fly-it'), .25, { css: { right: '1000px' }, ease: Quad.easeInOut }));
            //controller.addTween('#fade-it', TweenMax.from($('#fade-it'), .5, { css: { opacity: 0 } }));            
            //controller.addTween('#spin-it', TweenMax.from( $('#spin-it'), .25, {css:{opacity:0, rotation: 720}, ease:Quad.easeOut}));
            //controller.addTween('#scale-it', TweenMax.fromTo( $('#scale-it'), .25, {css:{opacity:0, fontSize:'20px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, fontSize:'240px'}, ease:Quad.easeInOut}));
            //controller.addTween('#smush-it', TweenMax.fromTo( $('#smush-it'), .25, {css:{opacity:0, 'letter-spacing':'30px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, 'letter-spacing':'-10px'}, ease:Quad.easeInOut}), 0, 100); // 100 px offset for better timing

            var pinDur = 1000;
            var pinAnimations = new TimelineLite();

            var timeline = new TimelineLite();

            controller.pin($('#howitworks'), pinDur, {
                anim: pinAnimations,
                onPin: function () {
                    $('#howitworks').css('height', '100%');


                    timeline.progress(0);
                    timeline.stop();
                    timeline.append(new TweenMax.fromTo($('#techiesscroll'), 0, { css: { opacity: 1 } }, { css: { opacity: 0 } }));
                    timeline.append(new TweenMax.fromTo($('#techiesstop'), 1, { css: { opacity: 0 } }, { css: { opacity: 1 } }));
                    timeline.append(new TweenMax.fromTo($('#techiesstop'), 2, { css: { opacity: 1 } }, { css: { opacity: 0 } }));
                    timeline.append(new TweenMax.to($('#cloudback'), 2, { css: { opacity: 1 } }));
                    timeline.append(new TweenMax.fromTo($('#cloudfront'), 2, { css: { opacity: 0 } }, { css: { opacity: 1 } }), -1);
                    timeline.append(new TweenMax.to($('#techie'), 2, { css: { opacity: 1 } })), -3;
                    //timeline.append(new TweenMax.from($('#techie'), 2, { css: { right: '1000px' }, ease: Quad.easeInOut, delay: 2 }));
                    timeline.append(new TweenMax.to($('#fly-it'), 0, { css: { opacity: 1 } }), -1);
                    timeline.append(new TweenMax.from($('#fly-it'), 1, { css: { right: '2000px' }, ease: Quad.easeInOut }));
                    timeline.append(new TweenMax.to($('#questionmark1'), .5, { css: { opacity: 1 } }));
                    timeline.append(new TweenMax.to($('#questionmark1'), .5, { css: { opacity: 0 } }));
                    timeline.append(new TweenMax.to($('#questionmark2'), .5, { css: { opacity: 1 } }));
                    timeline.append(new TweenMax.to($('#questionmark2'), .5, { css: { opacity: 0 } }));
                    timeline.append(new TweenMax.to($('#questionmark3'), .5, { css: { opacity: 1 } }));
                    timeline.append(new TweenMax.to($('#questionmark3'), .5, { css: { opacity: 0 } }));

                    timeline.append(new TweenMax.to($('#simple'), 0, { css: { opacity: 1 } }), -1);
                    timeline.append(new TweenMax.from($('#simple'), 1, { css: { left: '2000px' }, ease: Quad.easeInOut }), -1);
                    timeline.append(new TweenMax.to($('#questionmark1'), .5, { css: { opacity: 1 } }));
                    timeline.append(new TweenMax.to($('#questionmark1'), .5, { css: { opacity: 0 } }));
                    timeline.append(new TweenMax.to($('#questionmark2'), .5, { css: { opacity: 1 } }));
                    timeline.append(new TweenMax.to($('#questionmark2'), .5, { css: { opacity: 0 } }));
                    timeline.append(new TweenMax.to($('#questionmark3'), .5, { css: { opacity: 1 } }));
                    timeline.append(new TweenMax.to($('#questionmark3'), .5, { css: { opacity: 0 } }));
                    timeline.append(new TweenMax.to($('#secure'), 0, { css: { opacity: 1 } }), -2);
                    timeline.append(new TweenMax.from($('#secure'), 1, { css: { right: '2000px' }, ease: Quad.easeInOut }), -2);
                    timeline.append(new TweenMax.to($('#questionmark1'), .5, { css: { opacity: 1 } }));
                    timeline.append(new TweenMax.to($('#questionmark1'), .5, { css: { opacity: 0 } }));
                    timeline.append(new TweenMax.to($('#questionmark2'), .5, { css: { opacity: 1 } }));
                    timeline.append(new TweenMax.to($('#questionmark2'), .5, { css: { opacity: 0 } }));
                    timeline.append(new TweenMax.to($('#questionmark3'), .5, { css: { opacity: 1 } }));
                    timeline.append(new TweenMax.to($('#questionmark3'), .5, { css: { opacity: 0 } }));
                    //timeline.append(new TweenMax.to($('#questionmark1'), .5, { css: { opacity: 1 } }));
                    //timeline.append(new TweenMax.to($('#questionmark1'), .5, { css: { opacity: 0 } }));
                    //timeline.append(new TweenMax.to($('#questionmark2'), .5, { css: { opacity: 1 } }));
                    //timeline.append(new TweenMax.to($('#questionmark2'), .5, { css: { opacity: 0 } }));
                    //timeline.append(new TweenMax.to($('#questionmark3'), .5, { css: { opacity: 1 } }));
                    //timeline.append(new TweenMax.to($('#questionmark3'), .5, { css: { opacity: 0 } }));

                    timeline.append(new TweenMax.to($('#fly-it'), 1, { css: { opacity: 0 } }));
                    timeline.append(new TweenMax.to($('#questionmark1'), 1, { css: { opacity: 0 } }), -1);
                    timeline.append(new TweenMax.to($('#questionmark2'), 1, { css: { opacity: 0 } }), -1);
                    timeline.append(new TweenMax.to($('#questionmark3'), 1, { css: { opacity: 0 } }), -1);
                    timeline.append(new TweenMax.to($('#simple'), 1, { css: { opacity: 0 } }), -1);
                    timeline.append(new TweenMax.to($('#secure'), 1, { css: { opacity: 0 } }), -1);

                    //Step 1
                    timeline.append(new TweenMax.to($('#bigone'), 0, { css: { opacity: 1 } }));
                    timeline.append(new TweenMax.from($('#bigone'), 2, { css: { left: '2000px' }, ease: Quad.easeInOut }));
                    timeline.append(new TweenMax.to($('#subscribe'), 0, { css: { opacity: 1 } }));
                    timeline.append(new TweenMax.from($('#subscribe'), 2, { css: { left: '2000px' }, ease: Quad.easeInOut }));
                    timeline.append(new TweenMax.to($('#ByPhone'), 0, { css: { opacity: 1 } }));
                    timeline.append(new TweenMax.from($('#ByPhone'), 2, { css: { left: '2000px' }, ease: Quad.easeInOut }));
                    timeline.append(new TweenMax.to($('#Phone'), 2, { css: { opacity: 1 } }));
                    timeline.append(new TweenMax.to($('#OrOnline'), 0, { css: { opacity: 1 } }));
                    timeline.append(new TweenMax.from($('#OrOnline'), 2, { css: { right: '2000px' }, ease: Quad.easeInOut }));
                    timeline.append(new TweenMax.to($('#Online'), 2, { css: { opacity: 1 } }));

                    timeline.append(new TweenMax.to($('#bigone'), 2, { css: { opacity: 0 } }));
                    timeline.append(new TweenMax.to($('#subscribe'), 2, { css: { opacity: 0 } }));
                    timeline.append(new TweenMax.to($('#ByPhone'), 2, { css: { opacity: 0 } }));
                    timeline.append(new TweenMax.to($('#Phone'), 2, { css: { opacity: 0 } }));
                    timeline.append(new TweenMax.to($('#OrOnline'), 2, { css: { opacity: 0 } }));
                    timeline.append(new TweenMax.to($('#Online'), 2, { css: { opacity: 0 } }));


                    timeline.append(new TweenMax.to($('#cloudfront'), 2, { css: { opacity: 0 } }));
                    timeline.append(new TweenMax.to($('#cloudback'), 2, { css: { opacity: 0 } }));
                    timeline.append(new TweenMax.to($('#techie'), 2, { css: { opacity: 0 } }));

                    timeline.append(new TweenMax.fromTo($('#techiesscroll'), 2, { css: { opacity: 0 } }, { css: { opacity: 1 } }));

                    timeline.timeScale(1);


                    //; //sets timeScale to half-speed
                    timeline.progress(0);
                    timeline.play();


                },
                onUnpin: function () {
                    $('#howitworks').css('height', '600px');
                    timeline.progress(0);
                    timeline.stop();
                    TweenMax.to($('#techiesscroll'), 0, { css: { opacity: 1 } });
                    //timeline.reversed(true);
                    //timeline.reverse();
                    TweenMax.to($('#cloudfront'), 1, { css: { opacity: 0 }, delay: 0 });
                    TweenMax.to($('#cloudback'), 1, { css: { opacity: 0 }, delay: 0 });
                    TweenMax.to($('#techie'), 1, { css: { opacity: 0 }, delay: 0 });
                    TweenMax.to($('#fly-it'), 1, { css: { opacity: 0 }, delay: 0 });
                    TweenMax.to($('#questionmark1'), 1, { css: { opacity: 0 }, delay: 0 });
                    TweenMax.to($('#questionmark2'), 1, { css: { opacity: 0 }, delay: 0 });
                    TweenMax.to($('#questionmark3'), 1, { css: { opacity: 0 }, delay: 0 });
                    TweenMax.to($('#simple'), 1, { css: { opacity: 0 }, delay: 0 });
                    TweenMax.to($('#secure'), 1, { css: { opacity: 0 }, delay: 0 });

                    TweenMax.to($('#bigone'), 2, { css: { opacity: 0 } });
                    TweenMax.to($('#subscribe'), 2, { css: { opacity: 0 } });
                    TweenMax.to($('#ByPhone'), 2, { css: { opacity: 0 } });
                    TweenMax.to($('#Phone'), 2, { css: { opacity: 0 } });
                    TweenMax.to($('#OrOnline'), 2, { css: { opacity: 0 } });
                    TweenMax.to($('#Online'), 2, { css: { opacity: 0 } });
                }
            });
        });
    </script>
  • Like 1
Link to comment
Share on other sites

I should probably update that my issue has been solved, and though I really appreciate the help here, I found a solution in another discussion on the Superscrollorama github page (sorry can't find it anymore).

 

The content I was pinning was being set to relative/fixed depending on if pinned or not and it was causing the content that I was animating to shift its positioning (since it was absolutely positioned). An extra container div that I pin was all it took.

  • Like 1
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...