DevCat Posted June 14, 2021 Share Posted June 14, 2021 Good day! I am very fascinated by this effect. 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 More sharing options...
Cassie Posted June 14, 2021 Share Posted June 14, 2021 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 starthttps://tympanus.net/Development/WebGLDistortionConfigurator/?default=true 3 1 Link to comment Share on other sites More sharing options...
iDad5 Posted June 14, 2021 Share Posted June 14, 2021 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. 1 Link to comment Share on other sites More sharing options...
DevCat Posted June 14, 2021 Author Share Posted June 14, 2021 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 More sharing options...
GreenSock Posted June 14, 2021 Share Posted June 14, 2021 This question was already answered in the Github issue. I suggested PixiJS. This tweet seemed very applicable: 2 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted June 28, 2021 Share Posted June 28, 2021 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. 😄 2 Link to comment Share on other sites More sharing options...
Cassie Posted June 29, 2021 Share Posted June 29, 2021 I LOVE a good hack like that. I remember creating some 'glitch' effects on some banner ads with very low res images layered over each other with some y movement. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now