I’m wondering if someone can help me with the effect I’m trying to achieve. The goal is to have a scroll interaction happen whether the user scrolls manually (by using their mouse or finger(s) on an iOS touchscreen or on a laptop trackpad) or by using navbar menu buttons to pull up different areas of this one page site.
I realize moving sections around via button clicks, as I have it set up, as an interaction, is different than actually scrolling via the methods I described. But the scrolling interactions (one element fading on through an opacity animation, two others moving vertically) is based on another element, transparent, coming into the viewport. So, it would seem that however that element comes into the viewport, it should trigger the animations. I tried achieving this effect by doing the linking to unique id’s via the settings tab of the panel, but that didn’t work. Using the interactions to control the ease speed of the movement of the section vertically seemed like a better idea.
To test out what I have so far, you can click on the word Design in the navbar, and the word Home. If anything I’ve written is unclear, what I’m trying to achieve, let me know.
Would be really helpful if could show some example of what effect you want to have. Because what you did, for me is scrolling. And seems you want something different.
Sabanna, let me try and rephrase if I wasn’t clear previously. The effect I want to achieve is that the existing scroll-triggered animations should also happen upon clicking the navbar menu items.
Now that I type this, I suppose I could create a new interaction that will happen on click, which will do the same things that the scroll currently triggers. That is, fade on the gradient tint for the sky, and move the pieces of the rocky nature images vertically.
I feel like it shouldn’t be necessary to do this though. Because as I mentioned, the animations are set to happen when a zero opacity div (positioned below the viewport) comes into view, i.e. enters the viewport. When I click on the Design navlink, it causes the Section 2 container to move up, thus bringing the Div into the viewport. It seems like it should thus cause the animations applied to the scroll to happen (because they’re triggered by that Div coming into the viewport).
So, what I was asking is basically why is it not working? Is there a way to make this work, other than applying those same animations to the click?
Well, let say you do not have to put any interaction to menu-links for recreate scrolling effect.
There is in-page navigation for that. Did you familiar with that?
P.S. Looks like you are trying to recreate paralax effect.
You can just apply ID of section that you want this link to open.
Then you can apply interactions on scroll to elements, which you want to change (animate). Trigger SCROLL mean that you create animation to the element when it scroll to the screen-view.
Sabanna, yes, I know about the Settings method of linking, but it happens too fast. You cannot control the speed at which a section below the viewport moves to the top of the page when you click the button. I was using the interactions in order to control the speed.
And yes, I am trying to recreate a parallax effect. I think it’s pretty cool that this result can be achieved with the existing webflow tools.
I like the idea of animations that happen upon scroll. Basically, I want the same animations to happen from two different user actions. I want the user to be able to manually scroll, to navigate the page and see those “parallax” animations. But I Also want them to be able to navigate by clicking on the menu items and see those same “parallax” animations. That’s what I’m trying to achieve.
Because what you did, for me is scrolling. And seems you want something different.
