ScrollTo jumpy between sections

[rusticblonde]

Hi guys, 

 

I am working on a demo similar to Swag App (yes, there are loads of forum threads about it, but nothing seemed to completely nail it down and i've condensed them to a somewhat working version of what I want to create).



I have done a loop over the links, and the jump between seems really off? I am pretty sure i've implemented this right ... (she says).

 

Advice welcomed. 

 

Basically, The active states are working between the sections, and scrolling between them also switches and toggles the link active state. However I obviously want them to be able to jump between the sections also with the links at the top

 

Thankyou in advance!

See the Pen XWowLJw by rusticblonde (@rusticblonde) on CodePen

[Rodrigo]

Hi,

 

This mostly boils down to calculating the correct scroll point for each section based on the start and end points of each ScrollTrigger instance as shown in these examples:

See the Pen vYrXxem by GreenSock (@GreenSock) on CodePen

 

See the Pen rNrWrXN by GreenSock (@GreenSock) on CodePen

 

See the Pen poKEEKB by GreenSock (@GreenSock) on CodePen

 

There are plenty of those around as well in the forums.

 

Also this seems unnecessary:

const menuItems = Array.from(document.querySelectorAll(".heading a"));

When you already are using toArray:

const sections = gsap.utils.toArray(".stackCard");

Hopefully this helps.

Happy Tweening!

[rusticblonde]

Hi @Rodrigo, cheers for these, ill have to have a play and see if i can nail the end points better