- 10
- 216 626
Anansi Creative
Canada
Приєднався 11 вер 2019
How to Link to a Section Within Another Page
Add a link configured to take someone to a section within another page. Links to everything in the description! Help us teach more people by leaving us a like and a comment.
This is simple method using only Webflow. To start we need to give the section we want to link to and ID, then the link needs to be the url of the page plus a number sign followed by your ID name
Say hello!
Instagram anansi_crea...
Facebook anansicreati...
www.anansicreative.com/
Tools used for this project
webflow.com/
This is simple method using only Webflow. To start we need to give the section we want to link to and ID, then the link needs to be the url of the page plus a number sign followed by your ID name
Say hello!
Instagram anansi_crea...
Facebook anansicreati...
www.anansicreative.com/
Tools used for this project
webflow.com/
Переглядів: 19 090
Відео
The Best Method of Scroll Snapping! Easy Webflow Interactions
Переглядів 36 тис.4 роки тому
Add smooth, intuitive scroll snapping that works right inside the designer and won't impact load times with this custom CSS method! Links to everything in the description! Help us teach more people by leaving us a like and a comment. Cloneable: webflow.com/website/css-scroll-snap Code snippets for this project: github.com/joel-anansicreative/scroll-snapping/blob/master/CSS github.com/joel-anans...
Advanced Method: Custom Pop-Up Modal in Webflow
Переглядів 10 тис.4 роки тому
Go beyond the limits of Webflow and configure your modals with custom Java! Links to everything in the description! Help us teach more people by leaving us a like and a comment. Custom code here - github.com/joel-anansicreative/modal-javascript/blob/master/base-script This tutorial shows off a custom Javascript method of configuring a modal inside of Webflow. This allows you to close the modal ...
HOW TO: make custom pop up modals in Webflow the easy way
Переглядів 94 тис.5 років тому
Build your fundamentals in Webflow by learning how to create a custom pop up modal! Links to everything in the description! Help us teach more people by leaving us a like and a comment. This method of making a pop up modal in Webflow uses the built in interactions. they key parts of the build are that your modal is set to fixed so that it will be in the same spot no matter the scroll position a...
WEBFLOW BASICS: How to align elements in Webflow
Переглядів 12 тис.5 років тому
Build your fundamentals in Webflow by learning how to align elements in your projects! Links to everything in the description! Help us teach more people by leaving us a like and a comment. The first way you can align elements is by using flex, this is applied to a parent element and effects all child elements. The only downside of flex is that older browsers may not support it. the second optio...
How to make an awesome slider in Webflow!
Переглядів 7 тис.5 років тому
Build a slider that dynamically resizes content inside, in this case it's used to showcase a before and after for a product! Links to everything in the description! Help us teach more people by leaving us a like and a comment. Custom code here - github.com/joel-anansicreative/dynamic-slider Over the past couple weeks I have been working on a way to create a slider which resizes it's contents in...
How to direct download files from drive, custom download button on Webflow
Переглядів 10 тис.5 років тому
Build a download button that downloads any file directly from Google Drive! in this case it's used to download a wallpaper! Links to everything in the description! Help us teach more people by leaving us a like and a comment. Custom code here - github.com/joel-anansicreative/drive-direct-download-link/blob/master/link Creating a download button which links to Google Drive is as simple as upload...
How to make beautiful frosted glass elements in Webflow!
Переглядів 10 тис.5 років тому
Make incredible frosted glass elements which blur anything behind them and dynamically change based on support! Links to everything in the description! Help us teach more people by leaving us a like and a comment. Custom code here - github.com/joel-anansicreative/Frosted-glass-for-webflow/blob/master/CSS In this video we will make frosted glass elements similar to what we see on Apple's website...
Easy method of full screen snap to section in Webflow
Переглядів 15 тис.5 років тому
Add awesome looking snapping to full screen sections in your Webflow Projects! Links to everything in the description! Help us teach more people by leaving us a like and a comment. Script tag cdnjs.com/libraries/scrollify Initialization script projects.lukehaas.me/scrollify/#overview This method of section snapping uses a javascript plugin called scrollify, it's free and easy to configure. Say ...
Make drop down menu animations using Illustrator, After Effects, Bodymovin, and Webflow
Переглядів 2,5 тис.5 років тому
UPDATE - Have your navbar selected to start animation instead of the menu icon and set the dropdown as the animation trigger, this will ensure better reliability. Build a beautiful animated icon for your dropdown menus! Links to everything in the description! Help us teach more people by leaving us a like and a comment. Download the json file for free here drive.google.com/open?id=1KmHCmpK1DIWG...
Poor tutorial
My NavBar doesn't disappear now after implementing this. Any tips?
Using CMS sections, is their a way to make it work when each section have the same class?
I loved this method! thank you so much!
10/10 STILL WORKS GENIUS
Thank you! How do I disable it for mobile?
Hello great solution! I have a question: is there a way to make the scroll more smooth and with added delay? My idea is to make it feel like a traditional scroll that snaps to the next section if the users scroll to a certain point (say 2/3 of the current section)
thanks
Fcku
I don't think this works anymore. I don't have an "id" attribute in my google drive file public share link
Love it:)
Thats was super helpful. Thank you very much. <3
Can you make a new video on this (Download button) video. It is an old video, not working in updated Webflow. I am wating for your replay. 😔😪😪😔😔😟 Thank you.
Thank you so much mayn, I haven't applied this method yet but the amount of stress relief i get after watching this.....Thanks once again!!!
I love this tutorial, however I came across a problem. I have a component, and when I attempt your steps, the component is always on top of the popup despite the z-index set. Is there a fix for this?
It's fabulous
your code dosnt work
Thanks for posting this! It works great. I have a question though: being that I'm not too skilled in JS, how would I disable sections AFTER the snapping? I have a landing page where I'm using 3 snapping sections but thereafter I would love for it to scroll naturally. I'm not sure how to do that using the disabled method $.scrollify.disable();
did you find a solution to this?
Thanks
thank you!
I wanna add a small promotional ad in my modal, is that possible?
why you no make tutorials any more ? :(
great toturial, may I ask how can we add current state navigation dots for each section?
What if the section i want to add is home page , then what shouid be url in settings?
Fantastic, exactly what i was looking for, even now at more than 3 years later. Thanks for all your great work, hope you're still kicking ass. Very glad someone posted the adjusted link format fix in the comments, you should make a new video!
The URL structure is not the same and I'd like to offer a folder for download. Do you have a solution?
Works perfectly on the laptop but not on mobile...what adjustments need to be made to either disable it on mobile or get it to work properly on mobile?
where can I see this now
The explanation is very clear, thank you.
Thank you so much
Excellent video and explanation
is it possible that it doesnt work with a "animate while scrolling" lottie animation?
Very useful! However, how to disable snapping on mobile devices? The vertical space is so limited
great its help me Thanks
Dude, great video, everything works but a few things. One, it is not mobile-optimized. How to make it mobile and tablet friendly? Create separate interactions for those and change div block sizes? My form gets jammed and becomes of weird size. Second your method with second div block for whatever reason did not work for me. I had to still use Flex in order for a form to be centered when it appears.
I had to lower the speed to 0.75 to follow it a bit bettr, but otherwise a PERFECT tutorial to a popup box. thanks!
Thank you for this!
Thank you my friend, I set this perfect but I have one problem, before this I set up nav bar to pull me to down different section when I click buttons (about) (portfolio) (Contact us) ...Now this not working because of this :) but I wanna both things ....to pull me on section what I want when i click button and yout method ? THANK YOU
The video is 8-minute length but it took me almost an hour to follow your steps. It was too fast.
I followed the video to a T but still not snapping
I had so much trouble..then realized I had another 'submit' button for my 'close' button so the form was not closing. Once I fixed it the interaction works, thanks!
0:46 - Flex 2:20 - Margin Auto all sides, Display: Block, Position: Absolute, 0% on all sides, defined size: width in this example, 3:22 - Instead of adding an image object add it as a Background, set to Cover
0:40 - Start: First Div Block 1:59 - Another Div Block 3:42 - Third Div for a close button 4:30 - First Div Block set to display: none 4:39 - Interactions Hide/Show and Display: Block 5:00 - Initial state 5:10- Animation Ease Quad 5:38 - Close button 6:20 - Hand Cursor when hovering over close button
LIMITATION: If I use this, I can't use triggers to link to elements on the page. Has anyone found a work around this?
I'm looking for the same thing. Asked Webflow and reddit for help. Will get back to you if I find something.
I’ve always heard it pronounced ‘mode-L’… rhymes with total. But what do I really know. 🤷♂️ 😊 Great tutorial though.
Thank You
Thank you so much for this video!
Hey! This is a great tutorial but how can I make this work if my Nav Bar is already a component? I can't click out of it to animate the modal.
Has anyone found an issue with not being able to scroll on to the next section, after, ie I have a footer section, named differently for a reason.... it only scrolls as far as the named sections in the script, then is stuck
Have you tried linking to a section? I don't think it really works.