Jump to content
Search Community

Zoom Warp / Teleport Effect

DevCat test
Moderator Tag

Recommended Posts

Good day! I am very fascinated by this effect.
 

zoom teleport warp


Any tips how can we implement it on TweenLite or other animation technologies?
Or demos I can see.. Or what should I learn to implement such effect?

Any help is appreciated.

Link to comment
Share on other sites

First things first: TweenLite is an older version of GSAP. We definitely recommend that you learn and use GSAP 3.

 

Looks like there's a lot of webGL stuff going on here. 

There's a little shader/distortion playground on codrops which will probably be a nice place to start

https://tympanus.net/Development/WebGLDistortionConfigurator/?default=true

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Good advice from Cassie.

And good eyesight. :-)

That would be m question though. How much are the (fascinating but likely very expensive) milliseconds during the animation worth for you?

I should be very easy to have a (admittedly not so impressive) effect by zooming out the first picture while decreasing its opacity and doing exactly the the opposite with the second one. Finetuning it with a little blur to simulate acceleration some blending etc. could make it similar enough considering the costs of doing a perfect copy.

But if you feel comfortable with playing around with a webGL Cassies link (thanks @Cassie
 btw.) is a cool point to start - but the actually do use a lot of libraries and not all of them are current.

 

  • Thanks 1
Link to comment
Share on other sites

Thank you @Cassie and @iDad5. Seems I need to study more about this one... 😅

 

Quote

I should be very easy to have a (admittedly not so impressive) effect by zooming out the first picture while decreasing its opacity and doing exactly the the opposite with the second one. Finetuning it with a little blur to simulate acceleration some blending etc. could make it similar enough considering the costs of doing a perfect copy.

Nice idea! will experiment about it!

Link to comment
Share on other sites

  • 2 weeks later...

Sorry to nudge this thread I’m just seeing it and could not resist a little reminiscing.

 

I remember this exact same effect back in the Flash / Actionscript days. It was something like using a few containers, swapping depths and image sources. Along with the scaling & fading of pre-rendered distortions and blur on identical yet much smaller images done in Photoshop used for the in/out transitions. The transition part would happen so fast you never really noticed the difference going between the two actual images and the two transition images scaling / fading.

 

Those cleaver manual techniques have largely diminished with the presence of more modern dynamic approaches available today. Plus screen sizes were a lot smaller and of less quantity back then. Now with 4K, 5k, 8K monitors and thousands of devices dynamic WebGL, PixiJS, Shaders, etc., are the way to go ... GPU to infinity and beyond. 😄

 

 

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