Jump to content
Search Community

horizontal scrolling / triggering tweens

Spiv 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,

based on the example I made yesterday http://forums.greensock.com/topic/7467-reinitiate-a-tween-oncomplete/ I'd like to make this more user interactive.

As a starter I would like to make the background move on scrolling (scroll down moves forward, scroll up moves backward). I'm not sure if I need an external plugin for that like eg scrollorama since I work horizontally and don't need a scrollbar.

I did the basic move easily with scrollorama, but then i seem to need an infinite going scrollbar :)

controller.pin($('#bg_1'), 3000, {
	  anim: (new TimelineLite())
	    .append(
	      TweenMax.to($('#bg_1'), .5, 
	        {css:{backgroundPosition:-endPosition + "px 0"}, immediateRender:true})
	    )
	    	})

 




So how would I make a background infinite moving in the x direction, like in the example above, when using a scrollwheel/touchpad up/down? On the same trigger I would make the ant start/stop its walk cycle.

I can't seem to find a way to trigger when a user scrolls (when there are no visible scrollbars).

Thanks in advance.

Link to comment
Share on other sites

Hi Spiv,

 

The best way could be to check the variations of the window scrollLeft position (JQuery API) and using conditional logic you can set your tween forward or backwards, something like this:

$(document).ready(function(){

var div1 = $("div#div1"),
    tl1 = new TimelineMax({paused:true, repeat:-1, onReverseComplete:reverseLoop}),
    isForward = false,
    isBackward = false,
    previousPos = $(window).scrollLeft();//original position of the scroll bar, 0 when the page loads

tl1
	.to(div1, 2, {left:300, top:300})
	.to(div1, 2, {rotationZ:360});

function reverseLoop()
{
    //you get the total time of the timeline to set the correct point
    //for the reverse method, like this you can change your timeline 
    //dynamically. If some tween has a repeat or repeat delay you should
    //use total duration
    var tl1Time = tl1.duration();	
    tl1.reverse(tl1Time);
}

$(window).scroll(function()
{
	newPos = $(this).scrollLeft();//we get the current position
	deltaPos = newPos - previousPos;//how the position has varied
	previousPos = newPos;
	if(deltaPos > 0 && !isForward)
	{
		tl1.play();
		isForward = true;
		isBackward = false;
	}
	if(deltaPos < 0 && !isBackward)
	{
		tl1.reverse();
		isBackward = true;
		isForward = false;
	}
});

});

You can see it working here:

http://jsfiddle.net/rhernando/PZB4y/

 

Now this is the common ground for scroll bars and this is not your case, I'm going to presume that you're using some custom scroll system or plugin, in that case you could replicate the code above considering what's in this post, all you have to do is use the logic of the $(window).scroll() function into the first setInterval function (getTop) of this fiddle. Unfortunately i couldn't set up a live example now, I'll get one during the afternoon, in the mean time I hope this helps you  a little.

 

Cheers,

Rodrigo.

Link to comment
Share on other sites

Hi,

 

No problemo.

 

I've updated the fiddle to work based on the position of a theoretical scroll bar at the bottom of the page. If you click so the bar goes to the left the timeline will loop forward, if you click so the bar goes right the timeline will loop backwards:

 

http://jsfiddle.net/rhernando/PZB4y/2/

 

Now keep in mind that this is not based on any type of user interface event like clicks, keys, mouse or scroll pad, just the position of that element, so in your case you should look for an element that changes some css property value and associate that change to the direction of the timeline.

 

Also would be helpful to see some reduced sample of what you're trying to do.

 

Hope this helps,

Cheers,

Rodrigo.

Link to comment
Share on other sites

  • 3 weeks later...

I would just capture the mousewheel event delta, add (+/-) it to some scroll position variable. That scroll position variable value ÷ the total pixel width of one animation loop will give you the value to set the progress value....you can then tween to that progress value (using the progress property) making for a nice, smooth animation without actually "playing" or "reversing" (just advancing and retreating the playhead position)

 

A lot like I'm doing here http://www.discoverreynolds.com/concepts/discoverreynolds/

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

I would just capture the mousewheel event delta, add (+/-) it to some scroll position variable. That scroll position variable value ÷ the total pixel width of one animation loop will give you the value to set the progress value....you can then tween to that progress value (using the progress property) making for a nice, smooth animation without actually "playing" or "reversing" (just advancing and retreating the playhead position)

 

A lot like I'm doing here http://www.discoverreynolds.com/concepts/discoverreynolds/

 

I really like this approach for a site Im working on, would this technique work inside of a 960px grid? Or is this site basically all position fixed? I've seen a few instances of the custom scroll bar lately specifically this site:http://www.jana-water.com/en/about-you

 

I'm trying to create something like the pregnancy section of that page. Do you think I could pull it off if I work from your example?

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