Jump to content
Search Community

Scroll to next or previous DIV on click

ozycozy 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

I am building a dynamic form/div which has a clone button on the right bottom corner. Once you click it, it should clone the .item:first and then auto scroll down so the last div will hide. and when you click on prev or next button, it should scroll to the exact div that i want. my approach by using jQuery scrollTop with fixed px but it is not effective. since we have a lot of screen size. How can I achieve this?  this is the first time i want to try Greensock to make this happen. Thanks

See the Pen mjdmWK by ozy-cozy (@ozy-cozy) on CodePen

Link to comment
Share on other sites

2 hours ago, PointC said:

Sounds like you're looking for the ScrollTo plugin:

https://greensock.com/docs/Plugins/ScrollToPlugin

 

That will allow you to scroll directly to an element like this:


TweenMax.to(window, 1, {scrollTo:"#yourElement"});

 

Hopefully that helps. Happy tweening.

:)

 


thanks for the response!
the thing is #yourElement here is a dynamic element which always generate new element depends on how much you click the button. is there any option on greensock that can scrollTo next #yourElement and previoys #yourElement ??? 

Link to comment
Share on other sites

I'd probably use a NodeLIst which is recreated each time you clone an .item. Then use an activeItem variable to see which one is in view and scroll to the prev/next one. Maybe something like this:

 

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

I assumed you wanted to go straight to the new div when you create it. If that's not what you wanted, you could simply remove the tween from that event handler. Hopefully this helps. Happy tweening.

:)

 

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

  • 2 months later...

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