Jump to content
GreenSock

Applauz

Tween page to bottom then to top - POSSIBLE?

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 have an HTML page that is pulling in various social posts. Wondering it its possible to use Greensock to animate the page from top to bottom ... vice versa  ?

Link to comment
Share on other sites

Hello.. yes its possible to use GSAP to animate the page from top to bottom:

 

There is the ScrollToPlugin available:

 

http://api.greensock.com/js/com/greensock/plugins/ScrollToPlugin.html

 

Rodrigo has created some cool examples using it:

 

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

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

 

the above examples were referenced from this post reply by Rodrigo:

 

http://forums.greensock.com/topic/8053-scrolltop-in-greensock/?view=findpost&p=30899

 

also another example by Carl:

 

http://codeaway.info/greensock-animation-platform-scroll-to-plugin-sample/

See the Pen e3773ba558336892a3bd43c49d7fdcf2 by GreenSock (@GreenSock) on CodePen

 

i hope this helps

 

if you provide an example codepen or jsfiddle it would be great to better help you.. thx

Link to comment
Share on other sites

I'm trying to scroll the "social-stream" ID.

 

 

 

<div class="streamContainer fadeout">
<div id="social-stream"></div>
</div>
 
 
tried with this .. but not working
 
scrollToBottom();

function scrollToBottom(){
TweenLite.to(".social-stream", 10, {delay:3,backgroundColor:"#000000", scrollTop:200, ease:Linear.ease, onComplete:scrollToTop});
}

function scrollToTop(){
	
TweenLite.to(".social-stream", 10, {delay:3,backgroundColor:"#000000", scrollTop:0, ease:Linear.ease, onComplete:scrollToBottom});	
}


});
Link to comment
Share on other sites

i cant see your full js, css, and html..

 

but do you have jQuery included in the page?

 

the reason i ask is because in order to use your selector ".social-stream", as a target in the GSAP to() method .. you have to have jQuery loaded in the page so GSAP can take advantage of the JQuery selector engine

 

plus i see an extra }); (ending squiggly and ending parenthesis) at the end without any preceding code

Link to comment
Share on other sites

Hi,

 

This is basically a syntax issue, the scrollTo plugin recognizes the axis in which the element is scrolled, that means x for horizontal scroll and y for vertical scroll.

 

Also the plugin includes a very nifty possibility that allows you to pass the string "max" instead of a value and the engine does the rest and scrolls the element to the bottom without any need to pass or calculate a value. Like this you save yourself of tweening the scrollTop property of any element, all you have to do is include the plugin as any other js script.

 

Your code would be like this:

 

Here you include the scripts

<head>
<script src="scripts/jquery.js"></script>
<script src="scripts/gsap/TweenMax.min.js"></script>
<script src="scripts/gsap/plugins/scrollToPlugin.min.js"></script>
</head>

And this goes in your document ready declaration:

scrollToBottom();

function scrollToBottom()
{
    TweenLite.to(".social-stream", 10,
    {
        scrollTo:{y:"max"},//vertical scroll to bottom
        delay:3,
        backgroundColor:"#000000",
        ease:Linear.ease,
        onComplete:scrollToTop
    });
}

function scrollToTop()
{
    TweenLite.to(".social-stream", 10,
    {
        scrollTo:{y:0},//vertical scroll to top
        delay:3,
        backgroundColor:"#000000",
        ease:Linear.ease,
        onComplete:scrollToBottom
    });
}

Best,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Immediate follow up.

 

You also have a syntax error on your easing functions, your code right now states:

ease:Linear.ease

Ok so easeIn, easeOut, easeInOut or easeNone?

 

As you can see there are a few options, so you have to indicate one. Although keep in mind that by default Linear has no acceleration or deceleration.

 

Take a look at the docs

 

scrollTo Plugin: http://api.greensock.com/js/com/greensock/plugins/ScrollToPlugin.html

 

Easing functions: http://api.greensock.com/js/com/greensock/easing/package-detail.html

 

Sorry I didn't catch those before  :P

 

Happy tweening!!

  • Like 3
Link to comment
Share on other sites

Aaaaaaaand one more.
 
Your element has the id social-stream, but you've used .social-stream as your selector. Should be #social-stream

  • Like 4
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.
×