Jump to content
GreenSock

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

How to scroll the div on scroll

Recommended Posts

Hello,

 

I am trying to scroll the box. Like when user scroll the page from the top then my box will scroll bottom to top and if scroll the page from bottom to top the box will scroll from top to bottom.

 

I know it's confusion so I am sharing you the reference website http://www.xn--entreprenrsgatan-uwb.se/ . In this website ( check out the image first http://prntscr.com/jqor17), You can check the black box, When you scroll from the top then that black box animate from bottom to top and if you scroll from bottom animate top to bottom on the same position. I don't have any idea how to achieve this using scroll magic. Would you help me out in this?

 

See the Pen wXMNZK by Narendra_verma (@Narendra_verma) on CodePen

Link to comment
Share on other sites

I'm not 100% sure, but I think you're asking about the parallax effect on scroll? If that's the case, we've had several discussions about it. Check out these threads for more info and ideas.

 

Those are just a few of the discussions. Please use the search feature and look for parallax and you'll find several more threads.

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 5
Link to comment
Share on other sites

 

Here's another good solution from Shaun for parallax scrolling. Links tween progress to window scroll position.

 

 

 

 

  • Like 5
Link to comment
Share on other sites

Sorry, PointC sir and  Visual-Q sir,

 

I already checked that and tried but not working for me. I am confused from where should I start.

 

I updated my Codepen. Please check

 

Any more help in this?

Link to comment
Share on other sites

Your each() loop is targeting the class of .container, but you only have one of those so the box animations are firing at the same time. You'd want to target the .img_section class like this:

 

$(".img_section").each(function() {

 

The other problem is your trigger is pretty far down on the page so the element timelines are firing on page load. Here's a super simple example using some plain divs that should help.

 

See the Pen zaBYoW by PointC (@PointC) on CodePen

 

If you're using ScrollMagic, I'd highly recommend using the addIndicators() plugin to make your debugging easier.

 

Happy tweening.

:)

 

  • Like 3
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.
×