Jump to content
Search Community

Dragging Two Objects at Once, but at Different Speeds (Parallax)

gredesign 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

Hello,

I am working with a banner that is 970x418. I am trying to create a parallax effect on y-scroll (drag). In order to do this, I assume that:

 

1) I need to create a "container div" with a "foreground div" and "background div," foreground on top of the background.

2) Set the container itself to scroll/drag and affect both div's together.

3) Change the speed the background div to be a little slower, in order to give the parallax illusion.

 

So far, I haven't found anything that shows me how to work with dragging one item and using the info of that item to affect the positioning of another. I've seen sites that give code libraries like scrollMagic, but they are not easy when it comes to finding out how to do specific things, only what is shown in their examples. Please help. :(

Link to comment
Share on other sites

I'm not exactly understanding what you're trying to do. Are you wanting to have a parallax effect when the viewport is scrolled or do you want users to click and drag to get the effect?

In either case, there are multiple ways to achieve the effect. The approach you are using makes sense to me. Could you try clarifying your issue a little more?

 

Perhaps http://greensock.com/forums/topic/6049-parallax-scrolling/ can be of help

Link to comment
Share on other sites

Beautiful example. Thanks. When I drag now, the foreground updates to create the parallax effect. But one last thing is missing. When I switch from dragging to scrolling, the original calculations from the drag remain, and the parallax is not updated. How can I set "the scroll" calculations the same as the drag. Currently, I have this:

 

 

onDrag:function(){
TweenLite.set('#fg',{x:-this.x*.5,y:-this.y*.5})
}
 
Is there an event for the scroll when I'm using Draggable.create, etc?
Link to comment
Share on other sites

hmm , if i understood correctly ; actually Draggable parallax and Parallax Scrolling are different things ( in action )

 

you can set draggable Parallax just for draggable type:'x' and handle y property with scrolling .

 

any way scrolling method use the same concept , you should to get scroll position and set layers property with different ratio .

 

for more info about GSAP Draggable pls check the Doc :

 

http://greensock.com/draggable

http://greensock.com/docs/#/HTML5/Drag/Draggable/

  • Like 1
Link to comment
Share on other sites

Thanks,

I ended up not going with the drag and scroll. It became too involved, I have a short deadline, and I'm not a super hardcore coder (though I am learning). I did complete a scrolling version, but I know that the calculations in the "if" statements could have been done with less lines. Do you have any recommendations that Greensock already has in their API that will make the lines shorter, or logic that would make more sense?

 

See the Pen BjRrZx by gredesign (@gredesign) on CodePen

Link to comment
Share on other sites

Thanks,

I ended up not going with the drag and scroll. It became too involved, I have a short deadline, and I'm not a super hardcore coder (though I am learning). I did complete a scrolling version, but I know that the calculations in the "if" statements could have been done with less lines. Do you have any recommendations that Greensock already has in their API that will make the lines shorter, or logic that would make more sense?

 

See the Pen BjRrZx by gredesign (@gredesign) on CodePen

 

It looks like you could put the values to check against into a JS array and use a function to do the logic more generically. I don't have time to do it for you, but essentially my approach would be: Either keep track or calculate the current position before the move, keep track or calculate the height of the current item, calculate how far the user has scrolled, if they've reached some percent of the height in either direction, move in that direction 1 time if it exists.

  • Like 2
Link to comment
Share on other sites

Thanks Zach,

That is a good idea. I appreciate the direction given. As we speak I'm seeing if I can work it out that way (I hate the Math. Lol.) Alternatively, I also may look into performing some sort of hit test if possible with divs to eliminate having to do the math if I run into the frustration wall.

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