Adding own animations to the transitions between slides using fullpage.js

Design help Custom code
1

I need a vertical slider, and I decided to use fullpage.js. But is it possible to insert between transition of slides custom animation created in webflow? Let me tell you and show you what I need:

Watch the video to see what I need: Video

I need the same effect as the video. So that when you scrolling to another section (slide) the frame appears and disappears after the user is on the second slide. Is that possible? How to do it with fullpage.js?

2

The events of the scroll/slide manage by fullpage.js - sounds like hard task (To mix + over time maybe the code of webflow interaction will change).

In simple words:
Create animation
Play the animation when you go to slide-2 with callbacks

In your example their is some box animation - the closest official demo is this:

animation on scrolling:

The idea Ā±:

And tutorials:

1 Like
3

Hi @Siton_Systems

Great stuff!
Any chance you can give some specifics about how to integrate the callbacks if using anchors?

So assuming i have 4 slides with the following anchor names (ā€˜firstSlideā€™, ā€˜secondSlideā€™, ā€˜thirdSlideā€™, ā€˜forthSlideā€™).

Adding the callbacks will trigger an after page load animation using webflowā€™s interactions?

What will I need to do here in that case?
Also, this example shows integration for only one slide, but how do I trigger this to all 4 slides (basically triggering the after page loading interaction for each of the 4 slides)?

	afterLoad: function(origin, destination, direction){
		var loadedSection = this;

		//using index
		if(origin.index == 2){
			alert("Section 3 ended loading");
		}

		//using anchorLink
		if(origin.anchor == 'secondSlide'){
			alert("Section 2 ended loading");
		}
4

Just donā€™t filter by index or anchor:

afterLoad: function(origin, destination, direction){
     alert("Section ended loading");
}
1 Like