Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by mryoung
mryoung
4,156 Points

I’m stuck on my project ...how can I find the position of an element?

Hello,

I’m trying to animate an element as the user scrolls to it. I’ve seen this done before, so I assumed there was a Javascript method. Is there a way to do this?

1 Answer

Elena Man
Elena Man
21,092 Points
Elena Man
Elena Man
21,092 Points

So from what I have found after some research (I don't know how to do that myself but was very curious to find out how this is done as I have seen some very interesting animations on various sites), you have to check for your element to be in viewport and apply both CSS and JS to it. I found this: https://eddyerburgh.me/animate-elements-scrolled-view-vanilla-js which I think will do what you need if you modify it to suit your code.

Most of what I found use jQuery to achieve this, rather than vanilla JS. These are some interesting examples:

https://codepen.io/xtianmiller/pen/jbpqor

https://codepen.io/mit-io/pen/vRaVyO

The first one also deactivates your elements after being out of your viewports, while the second one doesn't.

I hope this was of some help to you!

mryoung
mryoung
4,156 Points

Thank you! You’ve provided the best answer I’ve found anywhere. I hope what you provided helps, but either way you are awesome. I hope you have a good day.