Wait before animation ends before changing page

Design help Animations & Interactions
1

Hello guys,

I want to animate the change of pages on my website.
When I click on the project ‘Iskabar’, I want the animation to end before actually changing the page. Is that possible ?

Here is the page : Projets

Thank you for your help :slight_smile:
Martin

2

This is possible – but you need some Javascript for that.

There are some JS libraries for that like https://swup.js.org/ for example.

I once used SWUP.js for a project (https://www.pss-farben.ch/), which worked quite well, though it took me quite some time to get it to work. It’s not as simple as just pasting the code. You have to create the animations manually with code (which takes some time depending on how complex your animation is).

Hope this helps

3

Hello Martin,

Thank you for your feedback !
I actually found a solution with this video : Webflow Tips / Créer une transition avancée entre deux pages - YouTube

It’s in french though :slight_smile:

Here is the code I injected in my project to get the result.
‘class-name’ is the class of the element that you clic on to load the next page.
1500 is the time delay in ms.

<script>
$('a.class-name').click(function (e) {
e.preventDefault();
var goTo = this.getAttribute("href");

setTimeout(function(){
window.location = goTo;
},1500);
});
</script>

<script>
  window.onpageshow = function(event) {
    if (event.persisted) {
      window.location.reload() 
    }
  };
</script>

Hope this helps :slight_smile:

1 Like
4

I went a bit further in my design and I created a component of the element I want to animate.
But this ruined the code I wrote :frowning:

Do you have any idea of how to use this code with components ? Or link it to the link wrapped inside of my component ?