Hi everyone !
I recently finished a website with a 3D animation binded to the page scroll.
This is my first project with Babylon.js, took a while to grasp everything but I finally managed !
This is a website for a local brewery, with stickers animated to fly and stick to the beer bottles, synchronized with each showcased beer.
You can see it here : https://larouget.com 
Just wanted to share, thanks for the engine guys, I think Iāll have a lot of fun with it !
Really smooth scrolling!
Neat! congrats!
Yeah, very nice 
I was in vacation in Jura last summer but didānt tried La Rouget, Iāll have to go back now 
Thanks guys, itās heartwarming
Amazing, really nice!!
Iām developing a similar project where I have to synchronize a quite complex fbx animation with the scroll.
Iāve it almost finished and finally the best way Iāve found to make it work well is to reproduce the exact second of the fbx animation depending on the exact position of the scroll.
Yeah thatās what I do too
On scroll, each sticker animation is set to a specific frame depending on the distance between the actual informative block in the page and the center of the viewport.
I use : window[āanimation_nameā].start(false, 1.0, required_frame, required_frame, false);
Donāt know if there was another way to do this, but it works !
I was trying a function as GoToFrame without results.
Like you I used the method of playing the same frame during Scroll and it seems to work:
$( window ).scroll(function() {
var scrolled_val = $(document).scrollTop().valueOf(); // Scroll Position
if (anim)
{
anim = window.scene.getAnimationGroupByName("CameraRig.Camera_Anim");
if (scrolled_val > 0.01)
{
anim.enableBlending = true;
anim.blendingSpeed = 0.01;
second = scrolled_val/getMaxScrollPosition()*animationDuration;
anim.start(false, 1, second, second, false);
}
window.clearTimeout( isScrolling );
actualScroll = scrolled_val;
console.log('SCROLL: ' + scrolled_val + "\nSECOND: " + second); // La Muestro en la consola
checkProject();
}
});
Could handle animations with a scroll with this fairly easy.
No sorry I donāt have any.
But I think I couldnāt even make one ? In the playground, we canāt use a ānormalā webpage and use itās scroll position with JS, right ? i donāt think we can even scroll in the playground, just display a āstandaloneā Babylon.js scene ?
I could make a playground to help if itās possible, but I believe it isnāt 
@Clement Thanks for your reply. My question is the 3d scene is being same as background but other html elements are moving while scrolling, How it is working.
@jayakannan This is quite simple, the babylon scene is in a div with āposition: fixedā as CSS, while the rest of the page is just a āclassic web pageā.
On my site, the babylon scene is fixed only for a part of the page, and scrolls when reaching the bottom : I just detected with JS when the page is between a upper and a lower limit, and switched the div to fixed if weāre between the 2 limits, and to absolute if weāre not.
Is this clear ? do you need more infos ?
Thanks for your explanation @Clement . Very simplified explanation you gave. just have a look into the below link. It is confusing me. please help me to understand, if you get any points from it.
@jayakannan On the webpage you sent, they seem to use the same technic I used :
You can inspect the page to check the exact CSS applyied to each div.
