Streaming live at 10am (PST)

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

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?

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:

https://alvarotrigo.com/fullPage/examples/apple.html

The idea ±:

And tutorials:

1 Like

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");
		}

Just don’t filter by index or anchor:

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