Jump to content
Search Community

Which Technology is travelshift.com using for top banner animation?

Jasmine test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hi,
I am a back end developer and have very least knowledge of JavaScript but I can understand code. I have been finding out whole day the code or logic used by https://travelshift.com/ they used to create top banner/slider which changes the slide/image by long click (about 1 second). I used chrome extension Wappalyzer and came to know that its using GSAP. I have been finding something similar but could not get any working code example.
Can anyone please provide some similar example with code or any article link please. Also I want to know this animation name so I can google it better way.

willing to get a response, thanks!

2020-10-14_16h36_51.jpg

Link to comment
Share on other sites

  • Solution

 

Hey @Jasmine - welcome to the forums :) 

 

I can not give you a name for that animation because it is absolutely non-standard.

What I can tell you though, is that they most likely make use of WebGL for that sort of effect.

 

There are quite a few good WebGL helper libraries out there, like three.js 

But wrapping your head around WebGL, especially around the neccessarry shader related things won't be trivial.

 

You can find quite a few examples of image transitions with WebGL on codrops, if you search for either WebGL or three.

 

That could be a good start point for you to get going.

 

GSAP can and will be helpful, when wanting to animate effects like these, but straight up building that sort of effect is not what GSAP does/can do.

 

 

Hope this helps.

Cheers,

Paul

 

  • Like 4
Link to comment
Share on other sites

18 hours ago, mikel said:

Hey @Jasmine,

 

If it's just about onmousedown / onmouseup, here's an example

 

 

 

 

Happy tweening ...

Mikel

Thanks For your reply Mikel, I have checked this Pen already but its not what is implemented in mentioned site. Actually that zooms image and that rotate from center using some sort of 3D effect. I tried little modifications with this Pen but could not achieve requirements. any further help ll be much appreciated.
Thanks Again!

Link to comment
Share on other sites

On 10/15/2020 at 4:18 PM, akapowl said:

 

Hey @Jasmine - welcome to the forums :) 

 

I can not give you a name for that animation because it is absolutely non-standard.

What I can tell you though, is that they most likely make use of WebGL for that sort of effect.

 

There are quite a few good WebGL helper libraries out there, like three.js 

But wrapping your head around WebGL, especially around the neccessarry shader related things won't be trivial.

 

You can find quite a few examples of image transitions with WebGL on codrops, if you search for either WebGL or three.

 

That could be a good start point for you to get going.

 

GSAP can and will be helpful, when wanting to animate effects like these, but straight up building that sort of effect is not what GSAP does/can do.

 

 

Hope this helps.

Cheers,

Paul

 

Hi,
Thanks for your reply akapowl,
you gave me right direction and I have been working on this to achieve requirements. I have been looking into shaders and their types with basic geometry.
Now what I want to do is have a planegeometry with 4 fragments, and ll rescale each fragment separately yo outer sides so it ll look like example site zoom effect.
can you please give me a direction or code to work on specific fragment with same shape please.
thanks!

Link to comment
Share on other sites

  • 2 months later...
  • 2 years later...

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