Streaming live at 10am (PST)

Delay default scrolling animation


#1

hey guys.
is anyone aware of a way to add a delay to the built in anchor scrolling animation in webflow? i know that there is a custom attribute called "data-scroll-time" you can add to the body of your site. but i would like to to fire an interaction first and then scroll to the desired section.

thank you for your help!
love =)
jaro


Smooth Scrolling - Awwwards website
Delay Anchor Scrolling Animation after Pageload
#2

Hey @buntestrahlen,

Within the interactions panel you can add in a specified wait time to trigger before or after your interaction

Hope this helps!


#3

thank you @Hamilton but i don't think you understood me correctly. i dont want to delay the interaction. i want to delay the default anchor scrolling animation.


#4

1) when link goes to another page (to some section with ID), page will load, delay before scroll and then scroll to certain element with ID:

<script>
$(document).ready(function () {
        // Handler for .ready() called.
    setTimeout( function() {
        $('html, body').animate({
        scrollTop: $('#focus').offset().top
            }, 1000);
        }, 17000);
});
</script>

2) when link (button) and section for scroll is on the same page:

<script>
$("#go-to-focus").click(function() {  
    setTimeout( function() {
        $('html, body').animate({
        scrollTop: $('#focus').offset().top
            }, 2000);
        }, 3000);
});
</script>

In 2nd case button or link doesn’t have to have any link-settings in Webflow, there should be empty link

And of course, code snippets goes at the “footer” part of custom code


Customize Webflow Anchor Scrolling Behavior/Speed
#5

thank you so much! wow! :slight_smile:


#6

hey @vincent!
last time i just needed the second solution because link and section were on the same page. for a different project i am trying to use your first solution now. the section is not on the same page as the link. but i dont really get it working.

i already wrote a custom piece of code to delay pageloads for every link with the class .pagetransition. like this i can trigger an interaction before the user will be guided to the new page. i will attach the code to the bottom of this post.

now i need a button to follow the same timeout function but also scroll to a section anchor on the next page. before the scrolling animation i want the site to timeout again so that i can fire another interaction first. so the idea is: click -> wait 400ms -> pagetransition -> wait 400ms -> scroll to section anchor.

maybe you can help me out again. i would really appriciate this.

thanks in advance!
jaro
_

<script>
$(document).ready(function() {
    $(".pagetransition").click(function() {
        
        var href = $(this).attr('href');

        // Delay settings
        setTimeout(function() {window.location = href}, 400);
        return false;
    });
});
</script>

#7

Hi Jaro.

I have a very limited understanding of Javascript. Usually I was reaching to @sabanna or @bart for help but as they work for Webflow now, they can't focus on custom code requests anymore. You need to find yourself a Javascript buddy and that buddy can't be me, very very sorry :confused:


#8

thanks for your response!
hopefully someone else who can help will read this.

:sunflower:


#9

Maybe increase your chances by writing a new post with an appropriate title and file it under "Code help"


#10