"While scrolling in view" issues (smoothing and more..)

Design help Animations & Interactions
1

Hi !

I’m trying to build a “while scrolling in view” interaction (you can find it on “scrolling div” class) and I struggle to make it clean. I hope you can help me with 2 issues I experimented :

  • Firstly, when I add smoothing to the interaction (and it’s quite necessary to me), all icons are moving very fast somewhere only we know :notes: at first scroll (they are crossing the screen very fast and it’s ugly). When I don’t add smoothing, there is no issue.

  • Secondly, the “contact BG” icon is on the screen before we scroll and then disapears. From what I tested, it’s because, the last position I gave him during the interaction is where he stands. But there is no way i can give him another position to finish my interaction since he has to finish there. Set up the class doesn’t change anything, interaction seems to overwrite everything (opacity, transformation…).

Thanks for your help, would be really helpful :pray:

PS : For those who want to understand what I made. I used “Axis xxxx” class to rotate each icons around the center of axis (it’s also the center of my logotype). I also rotate each icons at the same time to allow them to stay straight.

Here is my public share link: (Webflow - Anjo Transport)

(how to access public share link)

2

Any expert avaiable ? :upside_down_face:

3

Ok I figured both issues are linked.

I use an animation to introduce the website, where I set up my scrolling div from “hide” to “show” at the end. It happens that we see the end of the page/interaction (like if we were at 100% scroll) at the begining, and then when I scroll a little bit, all icons go where they should be at this rate (1% scroll) so they move really fast at their position.

So, how to simply make it works ? I just want my scroll animation to be at 0% when the scrolling div is “show” like it should be since we are at the head of the page, not at the bottom.

PS : I tried to solve it by not hiding then showing the scrolling div at the start of the site, but it still the same… The first thing we see is the end of the interaction.

4

I am dealing with the exact same issue and can’t seem to figure out how to fix it right now.