Custom Slider - overlapping previous slide

Design help Animations & Interactions
1

Hi at all,

I wanted to ask if the following interaction / animation in webflow is possible?

com-optimize

Link:http://www.flavinsky.com/

I have tried it with the slider (with cross fade) and tried to animate the slider so. But FAILED.

I also tried it with snapscroll (fullpage.js). but did not know how I manage to that the headline are always on the same position. FAILED

I already looked at some videos (eg by @PixelGeek and other ) but that was no help for me.

does anyone have an idea how I could implement it? I would be very happy about your help

Here is my public share link: LINK
(how to access public share link)

2

Can nobody help me??:pensive:

1 Like
3

Hello.

Sorry it took so long to get a response.

Can you please provide your “Read-Only” link?

4

So this is being made with something like: fullPage.js | One Page Scroll sections Site Plugin

You could make something similar to this in Webflow using the “While Scrolling in View” interaction trigger:

image
image554Ă—544 25 KB

You can also integrate Webflow with fullPage.js: https://www.youtube.com/watch?v=w9TGl2Zgx58

There are a few things going on that might be tricky to implement such as the letters spreading on hover, they are probably using something like GSAP SplitText for that and the countdown timer hover effect, which would be relatively simple jQuery.

I think you could get most of the way there following the fullPage.js demo link and using the scrolling in view interaction. It’s not the easiest thing, but will be easier with Webflow versus coding it all :slight_smile:

EDIT: Just re-read your original post and saw you tried to implement with fullPage.js. Were you able to get the demo working that Nelson was showing in the webcast? There are also other posts around the forum on implementing it. My recommendation would be to start simple, just get the full page scrolling working first, then start adding in elements, like the large text and then the floating images. One step at a time.

Hope that helps,

Sam

1 Like
5

You could try cloning this example as the starting point:

I believe adding the parallax extension would also help you to achieve the effect that you want: