DEV Community

vijitail
vijitail

Posted on

Pull to refresh animation with Vanilla JavaScript

Pull-to-refresh is a very popular swipe gesture on smartphones that allow users to load new content on top of listed data. Its used in all popular apps for smartphones and as well as in web apps these days and has become a major part of UX.


A few days ago I came across this kind of animation on dribbble, so I thought why not come up with my version of it.

Guess what, I managed to build this with no libraries or JQuery plugin, just plain Vanilla JavaScript. ๐Ÿ˜Ž

A very simple markup , a top loading container that will contain the loader and a bunch of cards.

Letโ€™s get to the fun stuff now ๐Ÿ˜.

The idea is to hide the loading container by default and slide it down when the user swipes down.
transform-style : preserve-3d will enable the cards to be positioned in 3D space and the perspective property on the card wrapper will determine how the user will see from their perspective; lower values will produce more intense 3D effects. Note that perspective is not set on the child elements.
More about CSS 3D animations and transforms.

That was it for the CSS, now letโ€™s begin adding the swipe gesture.

Touch events in JS are handled by the touch event listeners. These are similar to mouse events except they allow multiple touch on the touch surface.

pStart and pCurrent objects will store the touch positions of the start and current touch. Weโ€™ll require these to find the change in the Y coordinate to calculate the rotation of the cards.

In the swipeStart() function, weโ€™ll capture the touch coordinates and assign it to the pStart object.

In the swipe() function, we are setting the pCurrent object with current touch coordinates. Next step is to find the difference between the start and current Y position to calculate the distance of swipe and make a rotation based on the 30th percent of the distance. The loading container will only appear if the distance is greater than 100.

The swipeEnd() function will undo the rotation if the touch has begun but has not enabled the loading.

While loading, the loading container will slide down for 2 seconds for the purposes of demonstration but in a real world example it can take longer or less time based on the response from the server. The loading container and cards will get back to original state once the loading has finished.

I took reference for JavaScript from this stackoverflow question.

Complete source code in my codepen. Open the devtools to see the animation in action.


I hope you got to learn something new today ๐Ÿ˜„. If you have any questions or have any suggestions for improving the code, feel free to write your response.

Cheers and happy coding ๐Ÿป โœŒ

This post was originally shared on medium. Check out my medium profile @vijit2ail

Top comments (13)

Collapse
 
yegorsteshenko profile image
Yegor

This statement if (document.body.scrollTop === 0) constantly returns true and triggers reload animation every time you scroll up more than 100px, even if you at the very bottom of the page. Isn't is better to trigger animations only if you scroll up at the very top of the page? Like do this instead: if (window.scrollY === 0)

Collapse
 
bharathnallamothu profile image
bhaRATh

will it give me events like pull started , pull finessed? so that i can map it with server

Collapse
 
vijitail profile image
vijitail

Yes.. but currently these are not included in this post, you can add it easily using callbacks

Collapse
 
isalevine profile image
Isa Levine

this is so cool, thank you for sharing!!

Collapse
 
vijitail profile image
vijitail

I'm glad you found it helpful

Collapse
 
limbara profile image
Nico Limbara

let changeY = pStart.y < pCurrent.y? Math.abs(pStart.y - pCurrent.y) : 0; or it might trigger loading

Collapse
 
vijitail profile image
vijitail • Edited

Thanks man for pointing that out. Yes, otherwise it would trigger loading on swipe up as well. Great observations.

Collapse
 
okokokkkkkkjj profile image
.

what font do you use? I love the comparison operators look. :O

Collapse
 
vijitail profile image
vijitail • Edited

I created those images using carbon

But I guess the font is Fira Code

Collapse
 
flrnd profile image
Florian Rand
Collapse
 
chuksjoe profile image
Chukwunonso Orjiakor

Great post brother. Thanks for sharing ๐Ÿ‘๐Ÿ‘

Collapse
 
evankapantais profile image
Evan Kapantais

Is it really ok to self-close divs like that?

Collapse
 
vijitail profile image
vijitail

Yup