Jump to content
Search Community

One page navigation tween

failure13 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

If i have let's say such menu on one page layout:

    	<ul id="menu">
        	<li><a href="index.html#menu1" class="active">Company</a></li>
        	<li><a href="index.html#menu2">Products</a></li>
        	<li><a href="index.html#menu3">Partners</a></li>
        	<li><a href="index.html#menu4">Support</a></li>

How to make it tween slowly from one page area to another, when you navigate?

Link to comment
Share on other sites

Hello failure13,


try this scrollTo() example:

See the Pen AsLfc by jonathan (@jonathan) on CodePen


$menu.on("click","a", function(){
  var $this = $(this),
      href = $this.attr("href"),
      topY = $(href).offset().top;
  TweenMax.to($(window), 1, {
        y: topY, 
        autoKill: true
  return false;

API Docs fro scrollTo():




see if it helps? :)

  • Like 4
Link to comment
Share on other sites

if you look at my codepen example you will see i included jQuery, TweenMax, and ScrollToPlugin:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>

jQuery is included for easy cross browser event binding and its selector engine.


Then include TweenMax and ScrollToPlugin JS files


does that help?

Link to comment
Share on other sites

Yep, i just thought maybe there's something else involved...hmm don't understand, the basic idea looks like this with fixed menu:

See the Pen LwCgt by failure13 (@failure13) on CodePen


Here it is without your code, i've just inserted:

TweenLite.to(window, 2, {scrollTo:{y: 600, x:0}, ease:Power4.easeOut})

Which doesn't seem to do what it should (shift down for 600px on start i suppose), looks like as if plugin haven't been imported..


Maybe it's about how i implemet crossbrowser way of mimiking CSS position: fixed for header to let it work in IE6?

Looks like it may think that window in this case = menu, not to 'main', therefore no visible changes happen?


P.S. I imported classes into html's head here

Link to comment
Share on other sites

Hello again.. That codepen example you made is missing the JS files that need to be included in the JS panel .


You need to go to the JS panel and click on the gear icon. Then from the dropdown select jQuery. Then add the Tweenmax and ScrollToPlugin JS file paths. You can get the latest TweenMax and ScrollToPlugin JS paths by going to the top of this page and clicking get GSAP button.


Also for codepen you dont need to add the body tag since the HTML panel is the inner HTML of the body tag.



  • Like 1
Link to comment
Share on other sites

Hello & sorry for all the troubles)


Well technically i had all needed plugins in html - gear icon - "stuff for head" area as if it was normal html's head, and with TweenMan it seem to work good, you think that could be a problem for ScrollTo that i used html's gear instead of js?


Anyway, it doesn't work locally with pretty much same case, so i guess it's not the root of the problem..


See the Pen LwCgt by failure13 (@failure13) on CodePen

Here i've updated it with ScrollToPlugin imported via js, and TweenMax via html (since i have only one external JS file section to enter for some reason, unlike in your pen)


But still it doesn't seem to do simple:

TweenLite.to(window, 2, {scrollTo:{y: 600, x:0}, ease:Power4.easeOut})

P.S. Thx for body tag notice, i'll keep it in mind :)

Link to comment
Share on other sites

carl schooff

Ha, for real!

Wonder why it happens...


Thx Carl!

But then i have this problem, that scrollbar of main frame disappears if i remove height: 100%; from body


P.S. I think i got it, it's not body, but html matters, if i set html's overflow as auto, and body as hidden, everything is fine!

Thank you for help :)


And here is pen

See the Pen LwCgt by failure13 (@failure13) on CodePen

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...