Streaming live at 10am (PST)

Scroll Trigger (to replace click trigger)

#1

Hi,

I currently have a client site live view site here and I am looking at pushing some updates. One of the functions is to have a scroll trigger to view the work section which currently works on a click trigger (next / previous - bottom right)- see screen cast for trigger in action.

In development, I had introduced a scroll trigger but on scroll the IX2 trigger continued through all the project examples and I could not solve a way to scroll from one to another.

Any ideas on a solution would be great, or if anybody can point me to a ninja that can!

Many thanks

Darren


Here is my public share link: LINK
(how to access public share link)

#2

You can have a tall structure underneath your site, with fullpage sections (as many vertical 100VH sectionsas projects/targets), and you make this structure works with fullpage.js. So that any scroll will snap up or down. Then you can use the sections as triggers, or place any other div to use as trigger for your next/prev IX.

#3

Hey @vincent,

That sounds like a promising solution. I had thought of fullpage.js but could not think how to stop the page appearing as a scroller.

I guess what you are suggesting is on scroll, the next section will snap into view (and with the current ‘next’ IX applied) which will trigger on scroll and allow the transition between each as per the current?

#4

Hi @vincent

I have began to build a testing page to figure out the structure of the site, so far your suggestion is coming together.

One thing I am struggling to understand / solve - I can scroll through the site initially fine, but when I get to the last section the fullpage.js sections are still scrolling but the IX are no longer triggering?

Take a look at the staging here

I have not added the scroll up triggers as I think this is going to be a challenge (currently the trigger is activated when the next section scrolls in).

Many thanks

Darren

#5

Hi @vincent

I have made some progress integrating fullpage.js and scroll triggers, all working really well (thanks for the suggestion!).

I have a snag which I am struggling to get to the bottom of and just wondering if you had any thoughts / ideas.

As I have a landing element function on initial site visit, I have hidden the fullpage section so that the user does not scroll until they have landed on the work section. However, there is still a scroll trigger happening which is causing an issue (changing the state of some elements in the background). I have narrowed it down to the fullpage section, which is resolved when I delete this element from the page.

Take a look at the staging here

I have posted clip to show the issue here

Hopefully this makes sense, any ideas would be appreciated.

Many thanks,

Darren