Website with Babylon animation on scroll

Demos and projects
1

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 :slight_smile:

Just wanted to share, thanks for the engine guys, I think I’ll have a lot of fun with it !

15 Likes
Website with interactive 3d background
Babylon Playground strange behavior
2

Really smooth scrolling! :slight_smile:

1 Like
3

Neat! congrats!

1 Like
4

Yeah, very nice :+1: I was in vacation in Jura last summer but did’nt tried La Rouget, I’ll have to go back now :smile: :beers:

2 Likes
5

Hey @Clement!
This is EPIC! :heart_eyes:

1 Like
6

Thanks guys, it’s heartwarming :slight_smile:

2 Likes
8

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.

1 Like
9

Yeah that’s what I do too :slight_smile:

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 ! :slight_smile:

1 Like
10

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();
}

});

11

Could handle animations with a scroll with this fairly easy.

12

@Clement any PG for this ?

13

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 :confused:

14

@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.

15

@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 ? :slight_smile:

1 Like
16

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.

1 Like
17

@jayakannan On the webpage you sent, they seem to use the same technic I used :

  • The “layout” div is containing the “classic page” elements, all divs with informations, buttons and such.
  • The “viewport” div is in “position: fixed”, this is the div containing the Babylon.js canvas.

You can inspect the page to check the exact CSS applyied to each div.

1 Like
18

Thank you so much @Clement . :blush:

1 Like