Is it possible to incorporate a custom animation created in Webflow between transitions of slides in a vertical slider using fullpage.js?
TL;DR
- Use fullpage.js callbacks like onLeave and afterLoad to detect section changes.
- Create Webflow animations triggered by a specific class and use JavaScript to add/remove that class during slide transitions.
- Use setTimeout or disable auto scroll to ensure animations play before the section changes.
- Host all JavaScript in Webflow’s Project Settings or via Embed elements at the end of the body.
Yes, it's possible to incorporate custom Webflow animations into slide transitions in fullpage.js, including vertical sliders, but it requires integration between Webflow's animation triggers and fullpage.js's callback functions.
1. Understand How Fullpage.js Handles Slide Transitions
- Fullpage.js provides lifecycle callbacks such as
onLeave,afterLoad, andafterSlideLoad. - For vertical sliders, use
onLeave(for section change) andafterLoadto detect when a section has finished loading.
2. Trigger Webflow Animations from JavaScript
- Webflow animations are powered by its Webflow IX2 interaction engine.
- While Webflow doesn’t expose a direct API for animations, you can simulate them using Webflow’s
Webflow.require('ix2').actionsmodule, or better, trigger animations with embedded elements set to animate on a custom class.
3. Workflow to Integrate Custom Animations
- Build your animation in Webflow and set it to trigger when a specific class is added to an element.
- Use fullpage.js's
onLeaveorafterLoadcallback to add/remove that class dynamically.
Example (not raw code, just flow):
- Set up an interaction in Webflow to animate an element when class
.start-animationis applied. - In fullpage.js's
onLeave(origin, destination, direction), add the class.start-animationto the animated element, then remove it after the animation (or in the next transition).
4. Consider Delay and Timing
- You may need to add a manual delay or callback using
setTimeoutinsideonLeaveto allow the animation to play before sliding. - Alternatively, you can disable auto scrolling temporarily and call
fullpage_api.moveSectionDown()manually after the animation finishes.
5. Hosting JS Correctly in Webflow
- Add your fullpage.js and custom script in Project Settings > Custom Code or using an Embed element placed at the end of the Body section.
Summary
Yes, you can use custom Webflow animations during vertical slide transitions with fullpage.js by triggering class-based animations through fullpage.js callback events. This requires syncing the animation with the slider lifecycle manually using JavaScript.