Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Jasmine

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

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 post
Share on other sites

 

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

Hey @Jasmine,

 

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

 

See the Pen MWeKWbB by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

  • Like 3
Link to post
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 post
Share on other sites

Hey @Jasmine,

 

My pen only shows a mouse event to control an animation.
For the animation itself, @akapowl gave hints in his post.

 

Happy tweening ...

Mikel

  • Like 2
Link to post
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 post
Share on other sites

 

Hey @Jasmine

 

Sorry, but that is a bit over my head.

I am not particularly familiar with shaders and only know the mere basics of three.js with regards to WebGL.

 

This is nothing related to GSAP in particular, so it is probably a bit out of scope for this forum.

 

  • Like 2
Link to post
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.

×