Jump to content
GreenSock

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

Scroll to next or previous DIV on click

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

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.

:)

 

  • Like 4
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

@PointC this is exactly what i wanted!! thank you very much, well this gonna be my first try using greensock on my project. and yes it is true that everytime  i clone an .item it should go straight to that div/item.  Thanks :)

  • Like 3
Link to comment
Share on other sites

  • 2 months later...
7 hours ago, TRIPLESENSE REPLY said:

Hi all,

could you please update the documentation (https://greensock.com/docs/Plugins/ScrollToPlugin), saying that scrollTo also supports DOM elements as parameters? It just lists selectors and numbers :)

 

Got it. thanks.

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.

×