Jump to content
Search Community

Snap by ScrollTo to the nearest DIV,point (Superscrollama)

wezyr512 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

Hi Everyone!
I have problem with figure out method to scroll snapping to the nearest point. I'm using Superscrollama. This is my testing site:

http://arcadioenmadrid.es/scroll/2mojedemoFOLIO.html

First DIV is pinned by superscrollama for 3000px after this it scrolling up and there will be second pinned DIV for next some pixels. I would like to make something snapping like on this site:
http://www.kosmostumostow.pl

So in my case if user stop scroll at <1500 after 1 second site should auto scroll to 0px if he stop on >=1500 site should scrolling to the next DIV. I tried various methods with setTimeout and it never works. Browser snap to for example point 0px and I can't scrolling or looping function till browser crash on it. Anyone could me help with this? I'll be grateful. Thanks!
p.s. Maybe someone know why don't work trasition background to white on Chrome and on Firefox is okay?

Link to comment
Share on other sites

Hi,

 

One possibility is the center.js code, particularly in this line:

$(this).css({position:'absolute', margin:0, left: (left > 0 ? left : 0)+'px'});

If you check with developer tools or firebug that's causing for the div "#enviro" to change it's position from absolute at the beginning of the scroll to fixed and back to absolute when the opacity of the div "#flasz" reaches 1, maybe just remove the absolute part of it. Besides that I can't see anything else going wrong with it. Start with that and lets see what happens.

 

As far as the auto scrolling you could take advantage of the engine, you don't need setTimeout. Create an object and an element with a 0 value, then create a tween inside the window scroll event that lasts 1 second (or the time you want to wait before the auto scroll to happen) and then put an onComplete callback that scrolls to a certain point based on the current scroll position. The good thing about it is that you can take advantage of the overwrite manager, because since you're going to trigger the tween every time you scroll and you're going to be tweening the same object and the same property the previous tween will be killed, something like this:

var timeOutElement = {a:0};
$(window).scroll(function()
{
    TweenMax.fromTo(timeOutElement, 1, {a:0},{a:1, ease:Linear.easeNone, onComplete:autoScroll});
    //rest of the code
});

function autoScroll()
{
    //Here you put the code to scroll the window to the required point
    //You can use the scrollTo plugin
}

Like that when you scroll the element "a" of the object is going to be tweened from 0 to 1, and if there's another tween going on (meaning that less than 1 second has past since the last scroll event) is going to kill it, and when the tween completes is going to execute the autoScroll function.

 

Hope this helps,

Cheers,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Hello Rodrigo!

Thank you very much for your help! Your method is working like I wanted on Chrome. Unfourtunately it isn't work on FF at all and I don't know why. Here is updated site:
http://arcadioenmadrid.es/scroll/1-2ojedemoFOLIO.html

Maybe you know why it isn't work at FF?

Now I have to figure out universal method to snapping scroll that will be working on every DIV in 'container'.


I tried like you wrote with this 'flasz' DIV and changing body background-color on scroll. But problem was still on Chrome with trasition background color of body.

 

Now I have problem with Superscrollama too. DIV 'city' what is second should be pinned to animation like previous 'enviro' but it doesn't work too:/ The problem is with position CSS 'top'. Now DIV 'city' has top: 3700 and doesn't pin, when top: 0px it's working but it shows on the begining and after first div animation.

 

I'm grateful for your help!

Best Regards

Arek

Link to comment
Share on other sites

Don't mention it, glad to help.
 
The issue with the auto scroll function and firefox could be that you're tweening a css property of the body element, like this:

TweenMax.to($('body'), 1, {scrollTop:0, ease:Quad.easeOut});

Why don't you try the engine's scrollTo plugin, is super easy to use and works amazing, take a look at the api:
 
http://api.greensock.com/js/com/greensock/plugins/ScrollToPlugin.html
 
With it the code of your auto scroll function would be like this:
 
First  you load the plugin like any other script:

<script src="js/greensock/plugins/ScrollToPlugin.min.js"></script>

And then you make the call: 

TweenMax.to(window, 1, {scrollTo:{y:$('#city').offset().top}, ease:Quad.easeOut});

//You can set your position like a variable too but both should work with no problem
var cityTopPos = $("#city").offset().top;
TweenMax.to(window, 1, {scrollTo:{y:cityTopPos, ease:Quad.easeOut});

Hope this helps,
Cheers,
Rodrigo.

Link to comment
Share on other sites

Hi Arek,

 

The site is coming along really good, the graffic art is quite nice, great job!!

 

As for the auto scroll I've developed some simple code that gets the job done, the only downside is that your elements need to have the same height or the same separation between them in order to work, a little more coding would be necessary in order to achieve something more flexible, but at least is a start.

 

You can see it working here:

See the Pen bjLxe by rhernando (@rhernando) on CodePen

 

In this sample all elements have a 100% height which makes it very easy, but those could be used as containers for the different parts of a site.

 

Hope this helps,

Cheers,

Rodrigo.

Link to comment
Share on other sites

Hi Rodrigo!
What can I say? You're genius and magician!!:)
Your code works great! And also is flexible, that's what I needed:) Thank you very much!

Here is updated site:

http://arcadioenmadrid.es/scroll/2mojedemoFOLIO.html

Thank to you I fixed my css and this wrap/container mess. Every scene is in the container which have height = scene scroll lenght(by superscrollama)+scene height

 

Sorry for my mistakes before with ScrollTop instead ScrollTo. I forgot load plugin ScrollTo before and when I was using this my page skip to positions instead scrolling, so only ScrollTop was working for me:)



Thanks for nice words, I'm glad that you like my graphics! These graphics will are fixed later when I'll finish working code because now I've got them from my actual portfolio: arcadioenmadrid.es
I'm graphic designer not code developer so you know why I asked about simple things and why I made simple mistakes:)But I want to finish this project:)
So if you don't mind I'll put Your contacts/website/info in comment in my page source.
 

Thanks again!

Regards

Arek

Link to comment
Share on other sites

Hi Arek,

 

You're most welcome and thank you for the kind words!!

 

If you're interested I've polished the code a little and made it work for elements with different heights, you can see it working here:

See the Pen dLxAJ by rhernando (@rhernando) on CodePen

 

If more questions arise feel free to ask.

 

As far as putting my info on your site, no problem go ahead, a little free publicity never hurts, unless is bad publicity, but that's not the case here  :mrgreen:

 

Greetings to el Oso y el Madroño as well as to La Puerta del Sol and that beautiful city and country, I hope to go back there some time.

 

Cheers,

Rodrigo.

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