Animate Scene from Scroll Position EZPZ

Pryme8 · October 15, 2019, 11:40pm

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

sebavan · October 16, 2019, 11:14am

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

Pryme8 · October 16, 2019, 1:55pm

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.

Pryme8 · October 17, 2019, 4:52pm

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.

aFalcon · October 17, 2019, 4:57pm

This is friggin GREAT! : )

Pryme8 · October 17, 2019, 4:58pm

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

labris · October 25, 2019, 11:18am

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

Pryme8 · October 25, 2019, 1:32pm

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

github.com

Pryme8/scrolls.js/blob/master/docs/examples/bjs-example-2.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scroll.js - Babylon JS Example 2</title>
  <meta name="description" content="scroll.js - Basic Example">
  <meta name="author" content="Pryme8">
  <style>
	html, body {
	  min-height: 100%;
	  padding: 0;
	  margin: 0;
	  -webkit-box-sizing: border-box;
	  box-sizing: border-box;
	}

	body *, body *:before, body *:after {
	  -webkit-box-sizing: inherit;
	  box-sizing: inherit;
	}

This file has been truncated. show original

Or are you looking for specifically horizontal scroll support?

labris · October 25, 2019, 10:53pm

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:

To demonstrate several completely different and sometimes unusual approaches/solutions;
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

Pryme8 · October 25, 2019, 11:24pm

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?

labris · October 25, 2019, 11:57pm

Well I suppose that one review will be not enough anyway
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.

Tom_Schmitt · October 22, 2020, 11:55am

Hey,

I’m trying to get this working on an imported 3D Object but I don’t know what I’m doing wrong.
Babylon generated Objects work, but everytime I’m trying to use it on an imported 3D Model it simply say’s it can’t get the position of undefined…

Maybe someone can help me? I’m going crazy on this one…

sebavan · October 22, 2020, 1:25pm

const ball = BABYLON.SceneLoader.ImportMesh is the issue, you can only access the object from the import mesh callback as the function is async

Tom_Schmitt · December 3, 2020, 10:15am

Hey,
sorry to bother again, but I can’t find out what I have to…
How do I access the mesh? Sorry just starting with Babylon and JS in general.

sebavan · December 3, 2020, 3:55pm

Through the importMesh callback functions as you can see in the doc here: Loading Any File Type | Babylon.js Documentation

labris · December 3, 2020, 5:39pm

I am not sure what you are trying to do with the scrolling, but in order to access the mesh you can use, for your example:
BABYLON.SceneLoader.ImportMesh("", "https://raw.githubusercontent.com/BabylonJS/MeshesLibrary/master/", "shaderBall.glb", scene, function (newMeshes) { var ball = newMeshes[0]; ball.position = new BABYLON.Vector3(10, 3, 10); });

Here newMeshes[0] is the root node for all transformations.

If you need to get the mesh outside this function, you can use, for example
scene.getMeshByID or scene.getMeshByName.
What are mesh names or mesh ID - you can use the Inspector to see them. In order to call Inspector outside the Playground use scene.debugLayer.show();

Tom_Schmitt · December 3, 2020, 5:58pm

Alright, thanks guys! I’ll try it out

Tom_Schmitt · December 3, 2020, 7:27pm

Could you set up a playground with an example maybe? I still don’t get what I’m doing wrong… tried your example @labris, but it’s not working…

Tom_Schmitt · December 3, 2020, 7:28pm

In the first place, I’m trying to get an imported mesh to change its position or rotation based on scrolling:D

Pryme8 · December 3, 2020, 9:26pm

I had to make some updates to be able to do it in the playground… but you have an optional target param now for the scroll system to be able to use a specific element instead of the page itself.

Topic		Replies	Views
Product long scrolling page Demos and projects	17	1032	December 4, 2020
3dev.io website Demos and projects	26	1564	February 3, 2023
Promo page with scroll 3D Animation Demos and projects blender , animation , vuejs , babylon , website	13	752	March 29, 2023
My 3D portfolio website to show off and be fancy Demos and projects	7	825	August 12, 2023
PixCap 3D Editor - Animations, Scenes, lots of free Models Demos and projects	12	943	January 17, 2023

Animate Scene from Scroll Position EZPZ

Related Topics