Jump to content
GreenSock

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

scrolling in all directions?

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

I am new to GreenSock and i am wondering if it is possible to have something like this: http://www.smoothdivscroll.com/mixedContent.html

 

A script which uses "edges" of a div to scroll its content. But not only horizontal but also vertical! i did not even find one made with jquery :D. i think its also a question of performance. therefore i think of greensock.

 

so i need a script, which scrolls the content in a div in all directions.

Link to comment
Share on other sites

Sure, this is entirely possible but unfortunately I just don't have time to put it together for you right now. There are actually several ways to tackle it, but one is to set up a mousemove listener and figure out where the mouse is compared to the edges, and then as it gets closer to the edge, you change a variable accordingly that represents the "end" position, and feed that to a tween. Obviously you need to cap the maximum and minimum values based on the content too. 

 

Not exactly a simple thing, but entirely doable. Maybe someone else in the forums will be inspired to tackle it. 

Link to comment
Share on other sites

Hi,

 

I remember doing something like this for a carousel, where the rotation speed will depend on how far from the middle of the screen you are, tweening the timeScale property of the instance controlling the rotation.

 

In this case is the same but with the scroll position, which gets super simplified by the engine's scrollTo plugin.

 

I'll have to search that sample and then convert it to your needs. Unfortunately I'm spending very little time working in any development this past few weeks (whether is paid or support for the forums) so I can't tell you when I could set up something to illustrate the point, I hope I can get something done during the weekend, since I've already done something similar it shouldn't take that much time.

 

Rodrigo.

Link to comment
Share on other sites

now i use scrollto plugin which works good and saves me from getting more and more grey hairs and headaches :D

its not the same than hovering but i think its better for usability.

check this out:

http://tvim.de/scrollto/scrollto.html

 

on top of that the html part is responsive. but seems greensock cant handle percentage values that good :(

 

the code of each arrow is a very simple. maybe someone has an idea to improve it to save some lines of code??

Link to comment
Share on other sites

Hi,

 

What you could try is use the scrollTo plugin for all the animations and put on the top-left corner of every section a dummy element, so you can scroll the canvas to the specific position of that dummy element, like that on resize you'll get the new position using JQuery's offset property:

var dummyEl1 = $("#dummySection1"),//create a dummy for every section
    dummyEl1Pos = dummyEl1.offset();

//this goes on the click event. I'm just assuming a btn1 ID
$("#btn1").on('click', function()
{
  TweenLite.to(scrollsrc, 1.5, {scrollTo:{x:dummyEl1Pos.left, y:dummyEl1Pos.top} });
});

You just have to be careful to adjust the offset variables on the resize event. Here you can see JQuery's api docs on the resize event:

http://api.jquery.com/resize/

 

Best,

Rodrigo.

Link to comment
Share on other sites

Hi,

 

Sorry I didn't catch that but there's a lot of code in your app and I didn't read it carefully.

 

It's strange though that you're experiencing problems with percentages, keep in mind that percentages must be passed as strings:

//absolute values
TweenLite.to(element, time, {left:"50%", top:"50%"});

//relative values
TweenLite.to(element, time, {left:"+=50%", top:"+=50%"});

But looking at your code you're using percentages for your site map indicator. The problem is that when you resize the window you're not resizing the indicator, causing the issue of the white rectangle being kind of "out of place" when you click the arrows. If you resize the indicator proportionally to the screen size everything should work as expected.

 

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