Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

using greensock with scrollto jquery plugin

Recommended Posts



I'm wondering is it possible to use greensock easing on this plugin



I know gs has scrollto as well, but this plugin can scroll to a specific div. But I'm using gs easing already, so I really don't want to add another easing library, is there a way to call gs easing function?




here's how to use that plugin

$container.scrollTo('#img1', 500, { easing:'swing' });

Link to comment
Share on other sites

From what I can tell the scrollTo plugin you are using does a whole slew of calculations and then passes all the info off to jQuery's animate() method which relies on the jQuery easing equations.


from jquery.scrollTo source


function animate( callback ){
$elem.animate( attr, duration, settings.easing, callback && function(){
callback.call(this, target, settings);


I don't think it would be an easy endeavor to use jQuery's animate method with a GreenSock ease, but perhaps it would be possible to totally hi-jack the animate() call in the code above and replace it with a TweenLite using the GreenSock eases. Frankly, I wouldn't have any idea of how to do that easily / reliably.

Link to comment
Share on other sites

Wouldn't it be simpler to use jQuery to provide the offset for your target div and use TweenLite to scroll there? Kinda like this (untested):


TweenLite.to(window, 0.5, {scrollTo:{y:$('#img1').position().top, ease:Power2.easeInOut});


That way, you get all the speed benefits of TweenLite as well as the extra eases, features, etc.

Link to comment
Share on other sites

i see what you're getting! thanks so much! :)

Link to comment
Share on other sites

  • 2 weeks later...

I switched to gs and and the first scroll works perfectly, but then the scroll after that stopped working.


I have four divs with images in them and they're wrapped in another div


<div id="project1">
   <div id="img1"><img id="test1" class="img-container"></div>
   <div id="img2"><img id="test2" class="img-container"></div>
   <div id="img3"><img id="test3" class="img-container"></div>
   <div id="img4"><img id="test4" class="img-container"></div>


So basically I want to scroll to each image one by one when user clicks on the next button. and this works fine


TweenLite.to($('#project1'), .5, {scrollTo:{x:$('#img1').position().left}, ease:Expo.easeOut});


however after this, when I tried to do the same thing and scrollto #img2, instead of seeing #img2, #img1 scroll in again


TweenLite.to($('#project1'), .5, {scrollTo:{x:$('#img' + imgContainer.current_image).position().left}, ease:Expo.easeOut})


and then somehow the image would all disappear... I tried to change to scroll to a number instead but it still doesn't work. I saw carl's demo http://snorkl.tv/dev/js_demo1/scrollToDemo.html


so I'm thinking does this have something to do with the fact im using a div instead of window? thanks!

Link to comment
Share on other sites

maybe this has something to do with my css?



#img1 {
   left: 100%;

#img2 {
   left: 200%;

#img3 {
   left: 300%;

#img4 {
   left: 400%;

Link to comment
Share on other sites

I suspect it has to do with a misunderstanding of what jQuery's position() method is returning and what the values are relative to, but it would be much easier to troubleshoot this if you could post a simple example HTML file and the necessary JS/CSS to reproduce the issue. When we only have small chunks of the HTML/CSS/JS, it's trickier to diagnose.

Link to comment
Share on other sites

There were several problems I noticed:


1) You were using very old versions of GSAP, including a stale version of ScrollToPlugin which only supported scrolling the window. You had combined everything into a tools.js file, so it wouldn't help if you just updated the .js files in the local directory. I would definitely recommend staying up to date with the latest GSAP js files.


2) There was a logic issue with the positional data - jQuery reports the position() relative to the current scrollLeft of the parent div. In other words, let's say your child div starts at 1000 pixels to the right of the parent div's origin and then you change the scrollLeft of the parent to 700, now jQuery will report the child div's position() as 300. So the point is you need to treat it as a relative value:



scrollTo:{x:imgContainer.project[0].scrollLeft + $(target).position().left}


I have uploaded a revised version of your files to http://www.greensock.../temp/fixed.zip (I will remove it in a few days or once you confirm you got it). It was over 1MB, so I didn't want to permanently attach it here in the forums. It seems to work as you had hoped.


Does that help?

Link to comment
Share on other sites

that solves it! thanks for the help. :)

Link to comment
Share on other sites

  • 3 years later...

Does anyone know how to do this in AngularJS?


I tried this:



TweenLite.to(window, 0.5, {scrollTo:{y:topPos, ease:Power2.easeInOut}});


But it gives me this error:



  1. TweenMax.min.js:17 Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': 2 arguments required, but only 0 present
Link to comment
Share on other sites

It sounds like you just forgot to load the ScrollToPlugin file. Make sure that's loaded and you'll be good-to-go. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/plugins/ScrollToPlugin.min.js"></script>

Oh, and you nested the ease incorrectly - that should go outside the scrollTo object. 

TweenLite.to(window, 0.5, {scrollTo:{y:topPos}, ease:Power2.easeInOut});
Link to comment
Share on other sites

You should also probably use $window instead of window.

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.