Mobile “Pull to Share” Interaction Experiment

A mobile “pull to share” interaction that allows to share a page by using the familiar “pull to refresh” movement. Based on the action for refreshing and opening/closing a tab in Google Chrome for mobile.

Today’s experiment is an attempt to create a pull-to-share interaction that is based on the same Google Chrome interaction on iOS for opening/closing a new tab or refreshing the current tab. The sharing interaction in this experiment will do the following: when at the top, the user “pulls” or drags down the page, revealing a sharing bar. If the touch is released before a specific threshold is reached, the bar will close again, cancelling the sharing action. If pulled down enough, a selection circle will appear that will indicate which social sharing network is selected. By moving the finger horizontally, the selection can be changed. If released, the currently selected network link will trigger, resulting in a scaling effect of the selection circle for a success feedback.

Please note that this is highly experimental and only a proof-of-concept.
pulltosharemove
“Pull to share” interaction (move example)

The second demo in this experiment will work with the device’s orientation; so instead of having to move the finger, one only needs to tilt the device in order to change the selection.

pulltosharemove
“Pull to share” interaction (tilt example)

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

This is a very raw attempt to use the pull interaction for easy social sharing. There are many pitfalls here and the concept might be problematic because it’s taking an existing interaction and doing something else with it. The idea is to simply show it’s possibilities and implement it for fun. Maybe it will lead to new ideas for creative and useful mobile interactions.

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 28

Comments are closed.
  1. Really cool, but I think I’ll would never use something like that in a web app. Sadly.

    • u completely missing the point here… it’s about see what’s cool and apply to something could potentially benefit your audiences, rather than tell us you not going to use it in your app…

  2. I’m wondering, it is not intuitive to users. Users may not know to pull an drag to share

  3. Hi Mary;

    ”Find this project on Github” link is wrong.It’s the previous one ”Page Stack Navigation”

    Regards

  4. I do like this interaction a lot! ‘Pull to Refresh’ is quite useful for feeds, yet not that much useful for content pages that mostly don’t change. The problem I see here, the same goes for Chrome interaction, is that you have to go to top first before triggering this. Besides, it conflicts with Chrome’s interaction.
    Still, I like it very much, thanks for sharing!

  5. Hi there, I love this experiment and I want to apply it to something I’m already working on. Is it better to leave questions/issues here in comments or on the issue tracker for the Github repo?

  6. This is a very bad idea. Theuser expects that a page refreshs if you pull it.
    It’s seems like you want that more users share your page by overriding something existing which does something completly different. This is almost “macabre”.

    • This is a very raw attempt to use the pull interaction for easy social sharing. There are many pitfalls here and the concept might be problematic because it’s taking an existing interaction and doing something else with it. The idea is to simply show it’s possibilities and implement it for fun. Maybe it will lead to new ideas for creative and useful mobile interactions.

      ‘Read it’s on the article, show some appreciation and read the whole post before make nonsense argument.’

    • This is not nonsense. It’s a Android’s pull to refresh pattern. Many apps already use this pattern to refresh data. It shouldn’t be override by webpages.

  7. Hey Mary Lou, you are one amazing developer, i never drop any comments from pass posts, but every time you surprise us with amazing stuff. I think it’s time to show some appreciation with your inspiration and amazing works. so massive Thank you!

  8. This is waaaay cool. It’s really exciting to see how touch screen technology can offer alternative experiences when it can interact with mouse hover actions. Really looking forward to see how designers & developers will push this idea.

  9. Then when this feature we can use in future? because i very excited for use this feature. very creative design.

  10. Hmm… Could this be implemented at the bottom of the page when pulling up? It would get rid of the interaction overlap with chrome.

  11. I gave it a shot, the interaction is unique and awesome but it does not work i.e share anything at all!
    Does it work?

  12. Hi, this is really cool! Love it. But a small question is, not like refresh, people always shares after viewing the page, so it may be more reasonable to put this effect at the fiooter rather the header. 🙂

  13. Hi Mary,

    How would I modify this to include more than 3 links?? I currently have 5 links showing but only 3 can be selected?