How can I identify the active slide in Webflow when using scrollify?

When using the Scrollify library in Webflow to create a scroll-based website with multiple slides, you may want to identify the active slide at any given moment. This can be useful for various purposes, such as applying different styling or triggering certain actions on the active slide.

To identify the active slide in Webflow with Scrollify, follow these steps:

1. Install Scrollify: If you haven't already, you'll need to install the Scrollify library in your Webflow project. You can do this by adding the Scrollify script to your project's custom code settings. You can find the Scrollify library on GitHub or use a cloud-hosted version, such as a CDN.

2. Configure Scrollify: Once installed, you'll need to configure Scrollify to work with your slides. In your custom code, initialize Scrollify by calling the $.scrollify() method. You can specify various options such as section or container to define the structure of your scrollable slides.

3. Use Scrollify events: Scrollify provides events that you can tap into to identify the active slide. One such event is the after event, which is triggered after a section has been scrolled to. You can listen for this event and perform actions accordingly.

4. Identify active slide: Within the event listener for the after event, you can use the $.scrollify.current() method to get information about the current section. This method returns an object with properties like index , direction , and position . The index property indicates the current slide's position in the order of sections.

For example, you can use the index value to highlight the active slide with different styling:

$(function() {  $.scrollify({    section: ".slide",    after: function(index) {      // Get the active slide element      var activeSlide = $(".slide").eq(index);      // Apply active styling      activeSlide.addClass("active").siblings().removeClass("active");    }  });});

In this example, the after event is triggered when a new slide is scrolled to. The activeSlide variable retrieves the corresponding slide element using the index . The active class is then added to highlight the active slide while removing the class from other slides.

By following these steps, you can easily identify the active slide when using Scrollify in Webflow. This allows for dynamic styling or triggering of actions based on the user's scrolling progress.

Additional questions:

1. How do I install the Scrollify library in Webflow?
2. What are some other helpful events provided by Scrollify in Webflow?
3. Can I use Scrollify with horizontal scrolling in Webflow?