Jump to content
Search Community

Page Transition with Barbajs

Rakesh Roy test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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
Link to comment
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 5
Link to comment
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 3
Link to comment
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
Link to comment
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 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...