Jump to content
GreenSock

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

using greensock with scrollto jquery plugin

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

Hi!

 

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

http://flesler.blogspot.com/2007/10/jqueryscrollto.html

 

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?

 

Thanks!

 

here's how to use that plugin

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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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>
</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!

Share this post


Link to post
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%;
}

Share this post


Link to post
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.

Share this post


Link to post
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:

 

//OLD/BAD:
scrollTo:{x:$(target).position().left}

//NEW/GOOD:
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?

Share this post


Link to post
Share on other sites

that solves it! thanks for the help. :)

Share this post


Link to post
Share on other sites

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:

 

896

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

Share this post


Link to post
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});

Share this post


Link to post
Share on other sites

You should also probably use $window instead of window.

Share this post


Link to post
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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×