Anansi Creative
Anansi Creative
  • 10
  • 216 626
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/
Переглядів: 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...

КОМЕНТАРІ

  • @magnumXpress
    @magnumXpress 27 днів тому

    Poor tutorial

  • @bengoodey7519
    @bengoodey7519 Місяць тому

    My NavBar doesn't disappear now after implementing this. Any tips?

  • @NicolasGavrilenko
    @NicolasGavrilenko 2 місяці тому

    Using CMS sections, is their a way to make it work when each section have the same class?

  • @SepulvedaCarlos
    @SepulvedaCarlos 4 місяці тому

    I loved this method! thank you so much!

  • @tigerwitch1127
    @tigerwitch1127 4 місяці тому

    10/10 STILL WORKS GENIUS

  • @helenapostigo
    @helenapostigo 4 місяці тому

    Thank you! How do I disable it for mobile?

  • @projoker999
    @projoker999 5 місяців тому

    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)

  • @ZainMaqsood-ps6my
    @ZainMaqsood-ps6my 6 місяців тому

    thanks

  • @PennyTe
    @PennyTe 6 місяців тому

    Fcku

  • @ksaravan910
    @ksaravan910 6 місяців тому

    I don't think this works anymore. I don't have an "id" attribute in my google drive file public share link

  • @theshivangigupta_in
    @theshivangigupta_in 6 місяців тому

    Love it:)

  • @aylavuoldireluna
    @aylavuoldireluna 8 місяців тому

    Thats was super helpful. Thank you very much. <3

  • @JaySimha-t2g
    @JaySimha-t2g 9 місяців тому

    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.

  • @noumankhan6762
    @noumankhan6762 10 місяців тому

    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!!!

  • @mehmedtiro412
    @mehmedtiro412 11 місяців тому

    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?

  • @YameenKhan-vw1yu
    @YameenKhan-vw1yu 11 місяців тому

    It's fabulous

  • @ewanmcmillan4026
    @ewanmcmillan4026 11 місяців тому

    your code dosnt work

  • @Henrecoswavey
    @Henrecoswavey 11 місяців тому

    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();

    • @seifshahin5774
      @seifshahin5774 11 місяців тому

      did you find a solution to this?

  • @remekster
    @remekster Рік тому

    Thanks

  • @itshungle
    @itshungle Рік тому

    thank you!

  • @FearfulEntertainment
    @FearfulEntertainment Рік тому

    I wanna add a small promotional ad in my modal, is that possible?

  • @floyd1411
    @floyd1411 Рік тому

    why you no make tutorials any more ? :(

  • @fazlu3706
    @fazlu3706 Рік тому

    great toturial, may I ask how can we add current state navigation dots for each section?

  • @sohankunjera1704
    @sohankunjera1704 Рік тому

    What if the section i want to add is home page , then what shouid be url in settings?

  • @TheGhostie
    @TheGhostie Рік тому

    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!

  • @coraline3730
    @coraline3730 Рік тому

    The URL structure is not the same and I'd like to offer a folder for download. Do you have a solution?

  • @radswork
    @radswork Рік тому

    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

  • @KirTitov
    @KirTitov Рік тому

    The explanation is very clear, thank you.

  • @nicolas.mellado
    @nicolas.mellado Рік тому

    Thank you so much

  • @angelnum18
    @angelnum18 Рік тому

    Excellent video and explanation

  • @bronkowich
    @bronkowich Рік тому

    is it possible that it doesnt work with a "animate while scrolling" lottie animation?

  • @ShuaiZhou1991
    @ShuaiZhou1991 Рік тому

    Very useful! However, how to disable snapping on mobile devices? The vertical space is so limited

  • @elias1435
    @elias1435 Рік тому

    great its help me Thanks

  • @andreitrapizonian
    @andreitrapizonian Рік тому

    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.

  • @JSpyx
    @JSpyx Рік тому

    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!

  • @thejohnzapido
    @thejohnzapido Рік тому

    Thank you for this!

  • @petarlhs
    @petarlhs Рік тому

    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

  • @parislanuit616
    @parislanuit616 Рік тому

    The video is 8-minute length but it took me almost an hour to follow your steps. It was too fast.

  • @rheacecontracting
    @rheacecontracting Рік тому

    I followed the video to a T but still not snapping

  • @unexpectedartofficial
    @unexpectedartofficial Рік тому

    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!

  • @stevend2748
    @stevend2748 Рік тому

    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

  • @stevend2748
    @stevend2748 Рік тому

    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

  • @BSNsilviu
    @BSNsilviu Рік тому

    LIMITATION: If I use this, I can't use triggers to link to elements on the page. Has anyone found a work around this?

    • @ryang2723
      @ryang2723 Рік тому

      I'm looking for the same thing. Asked Webflow and reddit for help. Will get back to you if I find something.

  • @coreyblaser
    @coreyblaser Рік тому

    I’ve always heard it pronounced ‘mode-L’… rhymes with total. But what do I really know. 🤷‍♂️ 😊 Great tutorial though.

  • @hrabia8069
    @hrabia8069 Рік тому

    Thank You

  • @irvinspencercuer5241
    @irvinspencercuer5241 Рік тому

    Thank you so much for this video!

  • @hattieatthehalley8487
    @hattieatthehalley8487 Рік тому

    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.

  • @Someoneshuman
    @Someoneshuman Рік тому

    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

  • @denniszenanywhere
    @denniszenanywhere Рік тому

    Have you tried linking to a section? I don't think it really works.