Arch distortion effect on motion

[stefanopeschiera]

Hey all! With GSAP it’s possible to do an arch distortion effect on motion?  Here’s an example on the preload background https://jonathanalpmyr.com/

 

Thank you! 🤓

[GreenSock]

GSAP isn't the thing that actually does that distortion, but you can definitely animate it using GSAP. From a quick glance at the source, it looks like that site is using https://www.curtainsjs.com/

 

Good luck!

[stefanopeschiera]

Ok thank you! 😉

[akapowl]

 

Hey @stefanopeschiera

 

Just to make sure:

 

@GreenSock was probably referring to the distortion-effects on the images on scroll.

 

If it is only the reveal-effect on the preload background-overlay you are after though, you can achieve that by tweening on SVG paths, as discussed in this thread (it even contains an example that is pretty similar to the reveal on that page you linked to)

 

 

 

[Shrug ¯\_(ツ)_/¯]

You might also be able to gain something from these examples which use GSAP + Three.js with similar effect.

 

•

See the Pen povjKxV by ReGGae (@ReGGae) on CodePen

• https://greensock.com/forums/topic/22768-text-underline-page-transitions-that-are-super-smooth/?do=findComment&comment=118065

• https://tympanus.net/codrops/2019/10/21/how-to-create-motion-hover-effects-with-image-distortions-using-three-js/

 

 

 

 

[stefanopeschiera]

4 hours ago, akapowl said:

 

Hey @stefanopeschiera

 

Just to make sure:

 

@GreenSock was probably referring to the distortion-effects on the images on scroll.

 

If it is only the reveal-effect on the preload background-overlay you are after though, you can achieve that by tweening on SVG paths, as discussed in this thread (it even contains an example that is pretty similar to the reveal on that page you linked to)

 

 

 

Yes I'm referring to this!! Thank you @Shrug ¯\_(ツ)_/¯

[stefanopeschiera]

1 hour ago, Shrug ¯\_(ツ)_/¯ said:

You might also be able to gain something from these examples which use GSAP + Three.js with similar effect.

 

•

 

• https://greensock.com/forums/topic/22768-text-underline-page-transitions-that-are-super-smooth/?do=findComment&comment=118065

• https://tympanus.net/codrops/2019/10/21/how-to-create-motion-hover-effects-with-image-distortions-using-three-js/

 

 

 

 

Great transition! 😍