• Thursday , 4 June 2020

Javascript effects: waypoints

Code Canyon



Using waypoints on our website: Javascript will detect a specific scroll location and trigger a function.

Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/javascript-effects/

Original source

3d Ocean

Related Posts

44 Comments

  1. János Sági
    September 15, 2017 at 22:16

    Amazing! So simple and so cool thank you Thomas. You are great!

  2. Henry Vongsavath
    September 15, 2017 at 22:16

    Great tutorial! Thank you! I have question about using this with multiple elements. In short, how do I detect the enter and exit of each element? Does it do that automatically using the 'direction' if else statement?

  3. Dan Paymar
    September 15, 2017 at 22:16

    Awesome! Thanks so much for this. I've been banging my head against the wall trying to figure it out and your video was a huge help learning how to properly implement waypoints

  4. Maxim Yurchenko
    September 15, 2017 at 22:16

    Thx Thomas, it's very helpfull for me!

  5. Agustine Abuan
    September 15, 2017 at 22:16

    Where did that js-dipper-animate class come from? i'm so confused i triggered the waypoint but the animation i can't seem to do it huhu help please

  6. Diego The Flow
    September 15, 2017 at 22:16

    Thanks for your tutorial. I still have a little issue with my waypoints. I'm working with some fade-in texts. When I refresh the page, the waypoints are some sort of disabled and the text is shown right away. Only when I'm resizing the window, the waypoints are working. Do I have forgotten some code, maybe some for the window?

  7. Sumner Erhard
    September 15, 2017 at 22:16

    Excellent tutorial! This immensely helped me!

  8. Хангелды Илебаев
    September 15, 2017 at 22:16

    Thank you for share

  9. Ned Alturas
    September 15, 2017 at 22:16

    I really need this one right now thank you very much

  10. Fellype Ribeiro
    September 15, 2017 at 22:16

    Obrigado cara, realmente, muito obrigado. Me ajudou muito isso. Valeu!

  11. YaAndry andry
    September 15, 2017 at 22:16

    А что если прокрутить с низу вверх ? тогда анимация работает наоборот, исчезает когда не надо. Я очень начинающий разработчк =) Спасибо за урок!

  12. Aaron Reiss
    September 15, 2017 at 22:16

    Thomas, this tutorial was massively helpful, thank you so much! I can tell that Waypoints is exactly what I need to build this project I'm working on. But sadly, I can't even get the script to run in the first place, so I am pressed against the door and I can see inside, but I can't get in!

    Can I ask your help? I'm working on this project: and it just keeps giving the error that says "Uncaught TypeError: Cannot read property 'each' of undefined"

    If you have a moment, it would be so appreciated! I am a noob and I'm tired of banging my head against the keyboard!

  13. GlamMetal Renegade
    September 15, 2017 at 22:16

    Thanks Thomas. Could you send me some code I could use to make the element slide in from the left, rather than fading in? Paul.

  14. Talal Zaki
    September 15, 2017 at 22:16

    thank you, it was helpful, but how can i use waypoint inside vue2js. thanks

  15. Gamal Abdall
    September 15, 2017 at 22:16

    Thank you so much for introducing waypoint to us , I really appreciate it.

    Thanks again.

  16. Yury Viy
    September 15, 2017 at 22:16

    It doesn't work with mobile devices. So don't waste your time

  17. Kavi Sanghavi
    September 15, 2017 at 22:16

    Really Helpful! Thanks!

  18. Joel Garcia Nuño
    September 15, 2017 at 22:16

    I was not sure which files import but with your video at 2 min i did resolve my problem , thank you so much !!

  19. Dan Gullerud
    September 15, 2017 at 22:16

    Thanks Thomas. What if you had a page that scrolled left and right rather than up and down and wanted to activate an animation in a similar way? Can this be modified to accommodate this, or do you recommend a different solution?

  20. Kevin Mamaqi
    September 15, 2017 at 22:16

    Thank you Thomas. I would like to know if this is better than using a scroll event function. In terms of resources.

  21. Младен Богомиров
    September 15, 2017 at 22:16

    Sorry for the question but.. what is the plug-in you use for Sublime?

  22. Carl CIFER
    September 15, 2017 at 22:16

    Isn't WOW.js much simpler to use?

  23. xareph
    September 15, 2017 at 22:16

    Question, what if you dealing with multiple divs going down a page and lets say you want to change the background color for each individual one, do you need to set an offset for each one or is there a more efficient way of doing it? great video!

  24. Estefani Rangel
    September 15, 2017 at 22:16

    Thanks so much! It was very helpful!!

  25. Chris Brennan
    September 15, 2017 at 22:16

    hahaha awesome. thanks. http://codepen.io/drunktuts/full/WxYVmX/

  26. Little Lamb
    September 15, 2017 at 22:16

    Nice tutorial ! Work fine for me but i've a little problem. Maybe you can help me. I set the offset, but when i refresh the page in a different position from the top (example half page), the script starts running from that position, and 30% is no longer relevant. How can i resolve it?

  27. Jacob yt
    September 15, 2017 at 22:16

    why wont this work?? here is a sample of my jquery:

    $(".way").waypoint(function() {

    alert("waypoint hit");

    });

  28. Paal Joachim Romdahl
    September 15, 2017 at 22:16

    A very helpful clear instructional step by step tutorial!
    Thank you!

  29. Elwin de Witte
    September 15, 2017 at 22:16

    Great tutorial, I'll definitely use it in my future projects! I do have a request for a tutorial. I'd like to make a website where you have several sections on the website and where the browser will scroll to when you scroll up or down. Something like the "smooth scrolling" tutorial, but then as scrolling up or down as the input. I've seen it done before, is it really hard? Could you maybe make a tutorial on it?

  30. Chris Bubny
    September 15, 2017 at 22:16

    awesome tutorial. very helpful, thanks.

  31. Paul Farley
    September 15, 2017 at 22:16

    Thanks for the tutorial! Could you make another more detailed version of this? This is great to help someone configure it and understand the very basics, but it would be nice to dig in a bit more.

  32. Nick Abbott
    September 15, 2017 at 22:16

    Exactly the kind of video I was looking for. Great tutorial!

  33. Ricardo Valencia
    September 15, 2017 at 22:16

    Hey Thomas. Loved your short, simple, yet helpful tutorial. As of this writing,I will probably have been dabbling with jquery/js for one or two days. Just doing this for fun but it is so interesting. I had a question but it was answered when I visited the link you provided. Thank you so much.

  34. N G
    September 15, 2017 at 22:16

    Nice tutorial But is waypoint free to use ?

  35. Primeway Design
    September 15, 2017 at 22:16

    Really helpful. Thats the missing chain to use Waypoints.

  36. Andu Andrici
    September 15, 2017 at 22:16

    Great explanation! This should be made more popular.
    Thank you and congrats! 🙂

  37. John B
    September 15, 2017 at 22:16

    really helpful. im an upcoming professional Webdesigner and pretty familiar with html5/css3 but im struggling at the Moment with jquery/JS. im always glad if i find such nice tutorials like this.

  38. Tom Freestone
    September 15, 2017 at 22:16

    This is great, I'm using waypoints to trigger analytic events. However this has inspired me to add some waypoint animations too

  39. Annette, Peter, Luna Steintjes
    September 15, 2017 at 22:16

    Thanks for this great tutorial, saved me a lot of headache.

  40. Webbiz Dublin
    September 15, 2017 at 22:16

    Great intro!

  41. uzzal dey
    September 15, 2017 at 22:16

    Hey! Nice tutorial indeed. Very informative and easy to understand. Thanks a lot 🙂

  42. Chanh Nguyen
    September 15, 2017 at 22:16

    THANK YOU SO MUCH. Normally when I try things out I just copy and paste code and see how it works. For some reason their documentation didn't make sense to me, but after this video, everything clicked. I guess I need to start learning some JS now and stop copying pasting things and learn by trail and error…

  43. Klo Klu
    September 15, 2017 at 22:16

    Its works, thank You

  44. firdaus shajahan
    September 15, 2017 at 22:16

    awesome tutorial

Leave A Comment

You must be logged in to post a comment.