[Resolved] Add an "appearing animation" to the back-to-top button

[Christian]

Hi Tom,

I just added the back to top button to my site and have already themed it a bit more “material” 😉
Now the only thing I miss is some sort of animation to not just make the button “pop in” whenever I scroll down enough.
Is there a way to add this using CSS ? I really would like to not add another plugin…

PS: I hope the beer/coffee was good and thank you again for everything,
Christian

[Tom]

Good question!

The way I currently have it set up doesn’t allow for transitions.

I realize that’s not ideal, so I just adjusted it to allow them.

You can grab the latest code here: https://github.com/tomusborne/GeneratePress

The files you want to replace are:
https://github.com/tomusborne/GeneratePress/blob/master/inc/template-tags.php
https://github.com/tomusborne/GeneratePress/blob/master/js/back-to-top.min.js

There should be a small transition now by default, but you can make it more prominent like this:

.generate-back-to-top {
    transition: opacity 1s ease, visibility 1s ease;
}

Thanks for helping me improve the code 🙂

[Christian]

Hi Tom,

I just had time to implement the changes, everything is working great, thanks !

And please, don’t thank me, I have to thank you, as much as every other user of this great heme should be thankful for the theme itself and your precious support. This is rare nowadays.

Have a good time and thanks again,
Christian

[Tom]

Perfect 🙂

Glad I was able to help!

[Author]

Posts