Delay default scrolling animation

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

1 Like

Hey @buntestrahlen,

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

Hope this helps!

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.

  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:

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

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

8 Likes

thank you so much! wow! :slight_smile:

1 Like

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>
1 Like

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:

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

:sunflower:

1 Like

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

1 Like