Jump to content
Search Community

click tween jump tween

wwfc 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

first post - so please be gentle ;-)

 

can anyone help me out here - i am trying to get scrollto.js to do something that it doesn't seem to want to do... :-(

if possible, i want to use greensock to recognise certain points in a layout and respond to bith the point where it is and also what the user is clicking in the menu/nav... it would then see if there were any remaining distance left in the section to scroll and once that section had finished it would skip/jump to the selected section before autoscroll to the mid point of the selected section...

section 'a' is 300px in depth/duration and starts at scroll point 150px and finishes at 450px so the link would initially go to 150px and autoscroll(??) down to 300px and stop there.

and if another link is clicked section 'a' continues it's scroll through to 450px then skips to the scroll height of the section selected in the same manner as above.

i've seen similar navigation methods but these scroll through all and any sections in between not just a straight move from one section to another section rergardless of scroll position.
so it would be like

link 1 - jumps to 150px postion and auto scrolls to 300px
link 2 - jumps to 500px postion and auto scrolls to 650px
link 3 - jumps to 700px postion and auto scrolls to 850px

and all three links play the remaining 150px of current section/sequence before making the jump...
hope that makes more sense - i've tried various things with scrollto.js but it either scrolls through everything in between the points or simply skips and stops dead at whatever point...
i might be asking for the moon on a stick but as there are few 'heads' on here that know this stuff - thought it worth an ask...

anything anyone can give me will be most welcome - tuts/source/jsfiddles/urls... anything!!!

 

it's kind of along these lines but more sophosticated...

<!-- sample.html -->

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.contentbox {
	background: #FFF;
	height: 500px;
	margin: 20px;
	font-size: 28px;
	border: #CCC 1px dashed;
}
#apDiv1 {
	position: fixed;
	left: 30px;
	top: 150px;
	width: 373px;
	height: 173px;
	z-index: 1;
}
</style>
</head>
<body>
<div id="apDiv1"><a href="#" onclick="return false;" onmousedown="autoScrollTo('div1');">Document Section 1</a><br />
  <a href="#" onclick="return false;" onmousedown="autoScrollTo('div2');"> Document Section 2</a><br />
  <a href="#" onclick="return false;" onmousedown="autoScrollTo('div3');"> Document Section 3</a><br />
<a href="#" onclick="return false;" onmousedown="autoScrollTo('div4');"> Document Section 4</a></div>
<h2 id="myheading"> </h2>
<br />
<div id="div1" class="contentbox">Div 1 content...</div>
<a href="#" onclick="return false;" onmousedown="resetScroller('myheading');">
  go back to top</a>
<div id="div2" class="contentbox">Div 2 content...</div>
<a href="#" onclick="return false;" onmousedown="resetScroller('myheading');">
  go back to top</a>
<div id="div3" class="contentbox">Div 3 content...</div>
<a href="#" onclick="return false;" onmousedown="resetScroller('myheading');">
  go back to top</a>
<div id="div4" class="contentbox">Div 4 content...</div>
<a href="#" onclick="return false;" onmousedown="resetScroller('myheading');">
  go back to top</a>


<!-- autoScrollTo.js ... logic for a lightweight reusable external framework -->

<script> 
var scrollY = 0;
var distance = 40;
var speed = 24;
function autoScrollTo(el) {
	var currentY = window.pageYOffset;
	var targetY = document.getElementById(el).offsetTop;
	var bodyHeight = document.body.offsetHeight;
	var yPos = currentY + window.innerHeight;
	var animator = setTimeout('autoScrollTo(\''+el+'\')',24);
	if(yPos > bodyHeight){
		clearTimeout(animator);
	} else {
		if(currentY < targetY-distance){
		    scrollY = currentY+distance;
		    window.scroll(0, scrollY);
	    } else {
		    clearTimeout(animator);
	    }
	}
}
function resetScroller(el){
	var currentY = window.pageYOffset;
    var targetY = document.getElementById(el).offsetTop;
	var animator = setTimeout('resetScroller(\''+el+'\')',speed);
	if(currentY > targetY){
		scrollY = currentY-distance;
		window.scroll(0, scrollY);
	} else {
		clearTimeout(animator);
	}
}
</script>
</body>
</html>

***and apologies for the long winded post!!!***

Link to comment
Share on other sites

Hello wwfc, and welcome to the GreenSock Forums!

 

By looking at your example it will be hard to see the behavior your describe, without seeing your code in action.

 

Here is an example of a basic GSAP ScrollToPlugin usage example demo:

 

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

 

If you still have issues after looking at my example on how to setup ScrollToPlugin, can you please provide a codepen demo example so we can see your code in a live editable environment.

 

Here is a nice video tut by GSAP on how to create a codepen demo example.

 

Does this help?

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