Hook into scroll effect for JS code execution

[skndal]

Hi there,

I would like to hook into a Cornerstone element’s Effects > Scroll > Transform functionality to execute some Javascript. How is this possible?

Long story:
I have a large section with a div containing a sticky navigation and several rows with content.

I would like to trigger the nav items (headlines)'s ‘active’ state when the corresponding row (step 1/ step 2/ etc.) scrolls into view. How would you recommend to make this work?

Many thanks!

• M

[marc_a]

Hey @skndal,

Thanks for reaching out!

You can check our hooks and filter articles.

• https://theme.co/docs/actions-filters-and-hooks
• https://theme.co/docs/element-api-reference

Hope that helps.

[skndal]

Hello Marc,

Afraid it didn’t at all. Like I wrote in my question: I would like to ‘use’ the event listener/trigger for the ‘Effects > Scroll > Transform’ option on elements in order to run some javascript.

So. If I have an element that is configured with a fade in effect when it scrolls into view, I would like to run some javascript in addition to that fade effect. Best way is to ‘pick up’ on the event trigger of this effect.

To make clear: this has nothing to do with WordPress hooks/filters/actions, nor does it have to do with custom Cornerstone elements. This is about understanding standard behavior: what is the javascript event trigger for on-scroll effects?

[ruenel]

Hello @skndal,

In your Section element settings, Section > Customize, add the unique section ID. For example:

And then in your menu in Appearance > Menus > {specific menu}, your menu items will be something like:

Once you have this setting, please share the URL of your site or the page where we can view it. Thanks.

[skndal]

Hi @ruenel!

Thanks a lot, that helped with the menu part quite well. I have a follow-up question:

1. Any way to tweak the y-offset for this trigger?

Furthermore, there are some javascript animations that need to run as this moment, which are not part of any menu. Do you have a way to solve this, regarding my first answer?

2. So, is there a way to hook into the ‘scroll-in effect’ of an element?

Let me know and thanks so far!

Sincerely,

Meng

[ruenel]

Hello Meng,

You are most welcome.

1.) The y-offset of the trigger is the Y-offset location of the Section element #step-{n}. We do not have an offset that you can change it.

2.) To hook in to a scroll-in effect of an element, you can make use of the Scroll In effects selectors, namely; x-effect-enter and x-effect-exit. The setting for this is in the Effects tab of the element settings.

With your Custom JS code, you can check the elements CSS selectors to be able to trigger something when the effects scrolls in or out. For example,

if {your element} has `x-effect-enter` then
      do something here

if {your element} has `x-effect-exit` then
      do something here

else 
     do  other things

Please be advised that custom coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

[skndal]

This will do very nicely, many thanks @ruenel!

[tristup]

Hi Meng,

Glad that we are able to help you.

Thanks