Rodrigo Posted August 25, 2023 Share Posted August 25, 2023 Hi, I just noticed that you are asking help basically on the same subject in two different threads. The example provided by @mvaneijgen here should provide a solid starting point: Happy Tweening! Link to comment Share on other sites More sharing options...
omi Posted August 27, 2023 Author Share Posted August 27, 2023 On 8/25/2023 at 11:50 PM, Rodrigo said: Hi, I don't really understand what you mean with this: @mvaneijgen already linked a video where @Cassie talks about this: Check this example: Hopefully this helps. Happy Tweening! i tried but not working can anyone help me to provide the code please.. Link to comment Share on other sites More sharing options...
omi Posted August 28, 2023 Author Share Posted August 28, 2023 On 8/14/2023 at 9:00 PM, Toso said: I don't have an online demo for this section only iam sorry I created it inside a project currently working on it, it's a nextjs app @Tosoi need your help to implement the click functionlaity Link to comment Share on other sites More sharing options...
Toso Posted August 28, 2023 Share Posted August 28, 2023 @omi sure for the click function I used scrollToPugin Maybe it's not the best idea but I was thinking that since it is a scrub animation so i need to scroll for example 500px to reach the next card and to scroll 1000 for the third card and so on ,,,, 1- Calculated the position of the section in the page with getBoundingClientRect so if you pass this to scrollTo it will take you to the section 2- calculated the scroll position that I need to see the card I want as I mentioned before I called this ( step ) so you know it in the code 3- added them together and that's the ( target ) where you want to go with scrollToPlugin Forgive me if this looks weird But I was trying to achieve it with vanilla js and used gsap later when I was stuck and the deadline was about to hit me 😁 let boxHeight: any = gsap.getProperty('.singleBox', 'height'); const rect: any = document.querySelector('.boxes'); const rectPosition: any = rect.getBoundingClientRect(); scrollNav.forEach((e: any, i: any) => { e.addEventListener('click', () => { let step: any = (endTime / boxes.length) * i + boxHeight; let target: any = rectPosition.top + step; gsap.to(window, { duration: 1, ease: 'sine', scrollTo: { y: target }, }); index = i; activeDot(); }); }); Link to comment Share on other sites More sharing options...
Toso Posted August 28, 2023 Share Posted August 28, 2023 the only problem that currently happens in this section is that the clientRect function fails to calculate the position of the section after the refresh because when i refresh the page refresh in the section, if i go back up and refresh then scroll to the section it will work just fine Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now