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

[Jasmine]

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!

[akapowl]

 

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

 

[mikel]

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

[Jasmine]

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!

[mikel]

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

[Jasmine]

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!

[akapowl]

 

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.

 

[yasserzakaria1993]

hey @Jasmine ,

did you find a solution for this type of animation?

I'm facing the same issue right now.

Thanks in advance.

[ZachSaucier]

Perhaps my article on WebGL effects on regular webpages can get you started in the right direction.

[DBZ]

On 12/30/2020 at 1:58 AM, yasserzakaria1993 said:

hey @Jasmine ,

did you find a solution for this type of animation?

I'm facing the same issue right now.

Thanks in advance.

Hey @yasserzakaria1993

Did you find the solution for that animation?

Would you mind helping me, explaining that animation or giving a code

[Akash Pandey]

Hi everyone,
I also need the same code or functionality that is being used on the Travel Shift website. Could anyone please provide it?
Thanks in advance.

[GSAP Helper]

Hi @Akash Pandey and welcome to the GSAP Forums!

 

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[fripi]

I found this page giving a lot of explanation about such effects:

https://tympanus.net/codrops/2019/11/05/creative-webgl-image-transitions/

 

There's also a demo page with one of the effects close to the one you showed:

https://tympanus.net/Development/webGLImageTransitions/index3.html