Delay default scrolling animation

Design help Animations & Interactions
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

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

  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

9 Likes
5

thank you so much! wow! :slight_smile:

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

1 Like
9

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

1 Like
10