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