Snapscroll + Animation

Design help Animations & Interactions
1

Hi at all, I need your help :sob:

I’ve been trying to get my slider up for days like I want it. I want to achieve exactly this effect as on the website:

http://www.flavinsky.com/.

the next slide covers the first slide a bit (parallax) and the text stays in the same position. In addition, the navigation (text + SVG) must change accordingly in black or white depending on the slide.

for example, can I use fullpage.js + webflow animation or fullpage.js + custom code for animation? Do you have any idea how I can best implement it?

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

2

Hello @Mr.Arslan,
I think for what you are trying to accomplish you definitely need fullpage.js and webflow interactions, but with only those two you can imitate the same effect as the example that you linked. I think these videos will help you visualize a bit more all the steps that you need to implement your ideas. I hope they help. What in Webflow 007 - Snappy Scrolling Using FullPage JS - YouTube, Creating parallax scrolling animations in Webflow - YouTube

3

Thanks.

so i implemented snapscroll with fullpage but my problem at the moment is the following:

  1. how can i cover the section? Or how can i do that the content of the section have a fix position so its everytime the same position.
    (i can do the animation of the text and picture in webflow, that is not the problem)
    See link (http://www.flavinsky.com/)

  2. have anyone a codesnippet there i can change the color if the links and svg in my navbar to white on dark backround and black on light background.

4

You can achieve that by using the Parallax extension of fullPage.js using offset:100%. You can test it yourself on the parallax demo page

5

@Mr.Arslan,

So there are a multiple ways you can achieve that. One could be to set the content of each section to position absolute and the section itself to position sticky with the top set to 0. If you have something built share the link so that the forum can help you figuring out a solution based on what you have on the designer so far.