Jump to content
Rakesh Roy

Page Transition with Barbajs

Recommended Posts

Hi All,

I am new to js animation, can someone explain me how the nav transition works on http://magacom.fr  ,

i want to make the effect with barbajs and #GSAP .

 

Can Someone help with some code example.

Share this post


Link to post
Share on other sites
On 8/22/2018 at 12:41 PM, Sahil said:

Here is basic demo of how you can do that effect. You need a fixed element that will cover all the page content.

 

See the Pen jvEeBq?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

As for explanation, everything is pretty well documented there. http://barbajs.org/how-it-works.html

Thanks, your code clear all my doubts. Its fun using greensock. :)

  • Like 1

Share this post


Link to post
Share on other sites
On 8/22/2018 at 3:11 AM, Sahil said:

Here is basic demo of how you can do that effect. You need a fixed element that will cover all the page content.

 

Hey, that's a pretty interesting use for vmax! However, there is a downside to that approach. The speed of the animation will appear different depending on where you click. It will be faster at the center than at the corners.

 

Did you just guess the 260 value? That's close, but it actually won't cover the screen if it starts at a corner of a square shaped window.

 

 

See the Pen aaOKPY by osublake (@osublake) on CodePen

 

 

The vmax should be 283, which is 200 times the square root of 2. The square root of 2 is a ratio, which is the length of the diagonal of a unit square, a square that is 1 x 1 in size. 

 

Math.sqrt(1 * 1 + 1 * 1);
Math.sqrt(2);

 

There's actually a constant in JavaScript for that, Math.SQRT2 and its inverse Math.SQRT1_2.

 

  • Like 4

Share this post


Link to post
Share on other sites
Quote

Did you just guess the 260 value? That's close, but it actually won't cover the screen if it starts at a corner of a square shaped window.

 

Ya I guessed it. That's interesting, what are practical and common uses of Math.SQRT2 and SQRT1_2 that it is part of API?

 

How would you go about normalizing the speed based on where you click? I gave it a quick try but my approach seems incomplete or hackish.

 

EDIT: I guess you would suggest expoScaleEase, I will give it a try later.

 

See the Pen jvbpLB?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 2

Share this post


Link to post
Share on other sites

 

On 8/24/2018 at 5:29 AM, Sahil said:

How would you go about normalizing the speed based on where you click? I gave it a quick try but my approach seems incomplete or hackish.

 

To normalize the time, you would have to base the size on the center of the circle to the furthest corner. You could probably change the timeScale, but if you're going that far into calculations, you might as well just set the correct size. All the circles here will finish at the same time.

 

 

See the Pen PdZQrL by osublake (@osublake) on CodePen

 

 

On 8/24/2018 at 5:29 AM, Sahil said:

 

That's interesting, what are practical and common uses of Math.SQRT2 and SQRT1_2 that it is part of API?

 

There's lot of uses in trigonometry. The relationship is like this.

 

To get the diagonal of a 200 x 200 square.

200 * Math.SQRT2 = ~283

 

To get half the diagonal of a 200 x 200 square.

200 * Math.SQRT1_2 = ~141.5

 

If you know the diagonal is ~283, then the length of each side is

283 * Math.SQRT1_2 = ~200

 

Math.SQRT1_2 is the same as sin 45

Math.SQRT1_2 === Math.sin(45 * Math.PI / 180)

 

 

If you've ever heard of the golden ratio, √2 is used for the silver ratio.

https://en.wikipedia.org/wiki/Silver_ratio

 

 

Silver_spiral_approximation.png

 

 

ibERhDQ.gif

 

 

 

 

  • Like 6

Share this post


Link to post
Share on other sites
16 hours ago, OSUblake said:

If you've ever heard of the golden ratio

 

I get to hear that often but only as 'Golden Ratio logo', 'Golden Circles' etc. So I decided to get to bottom of it before I learn about silver ratio, then one thing led to another and this is what I ended up with. This has no relation with golden ratio, just me drifting somewhere randomly. :D

 

See the Pen JaKgBw?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 4

Share this post


Link to post
Share on other sites
23 minutes ago, Sahil said:

This has no relation with golden ratio, just me drifting somewhere randomly. :D

 

Random drifting can often lead to really cool discoveries and designs. Neat demo @Sahil👍

  • Like 2

Share this post


Link to post
Share on other sites

We totally highjacked this thread.

 

Your demo reminds me of a voronoi diagram.

See the Pen by search (@search) on CodePen

 

  • Like 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.