janpaepke
commented
10 years ago Hi!
Actually you were correct to go to the TweenMax Forums, as this really isn't a superscrollorama issue. But as I personally have a thing against newbie haters I'll try to help you.
Firstly I would strongly recommend setting pushFollowers to false, so you'll have the correct positions of all pinned elements right from the start. Bare in mind that his might require you to set your own spacers. For detailed descriptions see issue https://github.com/johnpolacek/superscrollorama/issues/93 .
Secondly I would add an anchor element at the top position of each pin element. This should be the point where you want to scroll when clicking the "next" link.
Try out this setup by using anchors <a name="myanchor"></a> and then have Buttons like <a href="#myanchor">next</a>.
When you click the link the page should now jump to the correct position.
Now you don't want it to jump, but scroll instead, right?
So here's how you do it:
$(document).ready(function() {
// page internal links
$('a[href^="#"]').click(function (e) {
var anchor = $(this).attr("href").substr(1);
var $target = $('a[name="' + anchor + '"]').first();
if ($target.length > 0) {
e.preventDefault();
var scrollYPos = $target.offset().top;
TweenLite.to(window, .7, {scrollTo:{y:scrollYPos, x:0}, ease:Power2.easeOut});
}
});
});Bear in mind, that the ScrollTo plugin is not loaded by default. You will have to include the javascript file. You can do it right after you include the main TweenMax file.
Please try not only to copy and paste the code (I have not tested it and it may not work). Try to understand what I did and redo it line by line. This way you'll learn.
regards, J
abhisuri97
jkrot
The way i plan to have my page set up is in the following way. The Timeline lite title (as shown in the demo). Where the credits of the title slide are, there will be a button that says "click to scroll down" That will move into the first pinned element. Each pinned element will have a "Next" button on it which will make the page scroll to move to the next pinned element. I have tried looking on the GSAP forums and they weren't really a help since I am rather inexperienced with JavaScript. I was wondering if anyone would be able to help me on this. additionally I have tried using what the following page recommended http://codeaway.info/greensock-animation-platform-scroll-to-plugin-sample/ and it worked in every browser except safari.