Animate Scene from Scroll Position EZPZ

So I made this today:

I know its not BJS, but I have seen people request for easy ways to animate or change values on a scene from the scroll position of the page.

All the other Libraries that are out there require a ton of extra steps and its a super pain. This is to alleviate that stress…

If you have any features, you want to let me know or if there are bugs please let me know ASAP.

Here is a quick preview of it in action, ill put up a live example here at some point once I have time:

If you need an example there is a simple example page on the GitHub and Ill add more examples later.
UPDATE
Before I got off for the day I added a quick BJS Scene Example

3 Likes

The web site looks stunning !!! GG !!!

1 Like

Thank you! Yea it will be live soon and I think once I have all my animation points set up it will have a really nice effect.

1 Like

I put up a live example if anyone wants to actually see the library in use without grabbing the repository. This page has 60+ animations being controlled by the system its pretty cool (almost certain I could make every adobe muse scroll example)
https://pryme8.github.io/scrolls.js/

Also have it up on a CDN and NPM now…

I have not seem to found a real limitation to it yet, so I am excited to wrap up work on the 3d website now.

Hopefully someone else finds this useful.

4 Likes

This is friggin GREAT! : )

Let me know if you find any problems on some random client, as far as I know it should work on all major browsers.

I suppose it is also possible to use horizontal scrolling with scroll.js?
Here is nice example

1 Like

I can make it possible!

@labris after looking at the website it looks like you could accomplish this with the down scroll still and just animating your scene to the left or right. Not really sure how they did theirs but its nice, I don’t like how you cant see the scrollbar though! I am trying to get the 3d website up and running here soon that uses it and maybe that will make more sense than on how to do it with scrolls. You would basically just do a fixed div over a body of a set height to accomplish this effect with scrolls.

If you really need the horizontal tracking though for some purpose I can add that.

@labris is this what you were talking about:
https://pryme8.github.io/scrolls.js/examples/bjs-example-2.html

Or are you looking for specifically horizontal scroll support?

1 Like

Yes, this is exactly what I was asking about (mouse scroll down = horizontal move).
I am writing a short review about several interesting 3D websites. The idea is:

  1. To demonstrate several completely different and sometimes unusual approaches/solutions;
  2. To show that all of them are possible to make with BabylonJS.

Horizontal move on mouse scroll could produce interesting effects but usually it is overused by designers (seems that they can’t stop because it is so cooool). In my example it is nice when you look at it for the first time - but after 3rd-4th screen the effect becomes boring, and even annoying after next screens since usability really sucks :slight_smile:

I am a few days from uploading the public website for Digital Origami, and it will be a fully animated 3d scene if you want to include that?

1 Like

Well I suppose that one review will be not enough anyway :slight_smile:
Since most of our clients are already enclasped with Chrismas fever I lack some time to finish even the first review. Still I feel the urgent need to educate clients and to show what is possible to do with 3D Web - most of them still know nothing about it…
Anyway, I will publish my reviews on the forum first; maybe after some time it would be reasonable to create some website for that.

2 Likes