Ambitious but technically feasible. I don’t know about recreating an animation effect with it though, you need min 10 im/second to get a animation effect, that’s a lot of cards to deal with, large dimensions for elements, lots of testing. A video/after effect proof of concept is required.
1/ That’s fairly easy, this is mixing the sticky technique with just another IX bound to a “scrolling into view” trigger. So when a certain object enters the viewport, it makes the menu shrink.
2/ exact same technique
so please can you make an example…
- scrolling smaller height after 400vh?
- disappear after scrolling 300vh?
thx to show me a loom printscreenvideo how it works exactly
I’m sorry no I don’t have that time. I outlined the process in my previews message, please give it a try first. The site I made and shared here is using the exact same trigger, please clone the site and explore. Come back for more help
Hello Karel! Vicent is kind of a superstar here in Webflow , so I’ll try to help you because he’s a busy guy. It’s not gonna be as good as if it was him teaching you, but here it goes.
- Let’s suppose you already have your sticky navbar all set up. Current properties:
- It sticks to the top of the page
- Current size 100px.
- The sticky navbar is currently between a “hero section” and “About me” Section.
- If you want the navbar to reduce its height to (let’s suppose 60px) after it hits the fourth section of your page (Let’s suppose it’s called “Contact Session”). You’ll need to do the following
- Add an element trigger to the CONTACT SESSION. That should be a "scroll into view " animation.
- Now you’ll create the timed animation that’s going to reduce the Navbar Height.
- At 0.00s, Select your navbar and select size in the timed actions menu and set the height to 100px. Check the “Set as initial state” checkbox on the bottom.
- With your navbar still selected, add a new TIMED ACTION, selecting size again and make the Height 60px. Tweak how the animation will behave as you wish (Easing and duration).
That should be enough for the “size reduction” animation that you asked
To make it disappear after a certain point, grow bigger, or any other kind of change, the process is exactly the same, but instead of affecting its size, you should affect its opacity and/or hide/show settings for example.
You should do minor tweaking so the animations look smooth and nice.
I hope I made it clear.
I hope you find it useful. Have a great day my friend.
thanks a lot,
I also worked out the workflow to add 2 scrollable sections
Is this correct?
Thanks to view this project (School was at Google Atelier Brussels with 2 workshops)
question about the filling up of the picture… how do you do that?
Also if I want to make a new content: the same elements get the same background: also when i change the classname to content2.
what do I do wrong?
Thanks to help me out
Note: also a problem for showing the button of a background image has a problem into the new style menu… did you know about that?
waauw thanks, what I do I make a new project with a new emailadress so you can show a free demo webflow site…
I currently don’t have my computer with me , so I’m not going to extend my reply so much.
Buuuut : for the most of the problems you mentioned above , you can easily solve them by using combo classes instead of renaming . (renaming doesn’t do anything but change the name of the existing class). You can learn more about the combo classes through the tutorials available in the webflow website.
For others inquiries, I recommend you to create a new forum post, because this one is not meant for troubleshooting.
Hey guys, this is really cool! Thank you @vincent for taking the time. I went ahead and cloned it and am trying to do something, maybe you can help me out.
Would it be possible to make the first element of the scrollable content start from the center of the screen instead? (attached image) I made that by pulling up the left margin of the content div, and it kind of works, but it’s such a “by eye” solution that can’t be scalable to different resolutions. Is there a way of making it happen automatically responding to the resolution of the screen?
- This one is more like a bug but do you know why the H1 sticky header disappears when you scroll? it kinda flickers or simply goes away when I scroll. I tested different browsers and it still does, but I just can’t figure out why.
Any help would be really appreciated.
On your site, or on my demo?
Do you mind sharing your site’s read-only link please?
1 - On your site’s dashboard, click the Share icon:
2 - Generate and Copy the link:
3 - Then edit your post here, and paste the link inside.
Hi Vincent Thank you for your reply and for checking this.
The flickering is only happening on Chrome Version 72.0.3626.96 (Official Build) (64-bit). I just tested on Microsoft Edge and Opera and it doesn’t happen.
I just edited my post and it now has the public link.
The rate at which Google is destroying things is staggering. Each update brings CSS bugs. They don’t even respect anymore CSS specs for things like masks, I have to update my demos all the time, cheating with CSS specs to make it work in Chrome. Add to that the push to SSL, the push to their tech to speed mobile pages… seriously Chrome is on a good path to become the new enemy.
It suddenly seems so important that Webflow started to support Firefox!
Fixed Chrome bug by forcing the title into 3D space by setting a self perspective on it.
Those bastards! … Anyways, thank you for taking a look. That sounds … like something I don’t know yet. If it’s not too much trouble, could you please tell me how did you force the thing to a 3D space?
Thank you again
“forcing a thing into a 3D space” is something you’re sometimes forced to do in order to solve 3d transform bugs and zindex bugs. Here, it solved my issue, but I don’t really know why or if there’s a better method.
What I could witness is that along my interaction, the element containing the starry skies, that is moving lateraly, jumps over the title. I set up the starry skies at opacity 50% and I could see the title going behind, even though it has a higher z-index than the skies.
So in order to try to make chrome to stop doing that, I tried 3D transform, to give more power to my title. I could have displace my element 1px on the z axis, but I chose something else, giving self pespective to the element, it’s a 3D property that doesn’t displace the element, but tells chrome (probably) to draw it in a different way, a different space.
You’re the best. Once again, thank you sir.
Honestly I’m just lucky this works, thos tricks are usually for when you’re already working in a 3D space. However it’s not so surprizing it works. It was a visual glitch, and by setting a 3D property, I force Chrome to use the GPU to render that element. So it’s possibly a totally different method to render the element, and it fixes the bug on the way.
To fix a buggy 3D interaction, you sometimes have to force element in or out a 3D space. You can for example just do
backface-visibility: hidden; or
perspective: 1000; to force an element in, and
transform-style: flat; to force a sibling of a 3D element out of the 3D space.
Hi Vincent this is awesome, thank you so much. Is there a way to shorten the width side to side, if you don’t want to many images? Here is my project(link below) I am trying to get rid of the dead space on the right after you scroll through the images, but can’t figure it out? Thanks in advance for the help.
Vincent, is it possible to link to sections within a horizontal scroll?