Page Transition with Barbajs

[Rakesh Roy 2 Likes (Newbie)]

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.

[Sahil 2,541 Likes (Superhero)]

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

[Rakesh Roy 2 Likes (Newbie)]

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.

[OSUblake 9,990 Likes (Superhero)]

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.

 

[Sahil 2,541 Likes (Superhero)]

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

 

[OSUblake 9,990 Likes (Superhero)]

 

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

 

 

 

 

 

 

 

 

[Sahil 2,541 Likes (Superhero)]

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.

 

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

 

[PointC 8,599 Likes (Superhero)]

23 minutes ago, Sahil said:

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

 

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

[OSUblake 9,990 Likes (Superhero)]

We totally highjacked this thread.

 

Your demo reminds me of a voronoi diagram.

See the Pen by search (@search) on CodePen