Making image smooth expand to available viewport width & height with transition.

[prakash24]

I need to make animation, like exactly in attached video,

i’ve a section which has some padding around left and right with image inside it. (initially image width is around 1280px) then when user triggers scroll then image should smooth expand around edges to available viewport to look like fullscreen(not position fixed). user can scroll image to show content below images also. please see tha attached video. please share any reference or code

[GSAP Helper]

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. 

[Rodrigo]

Hi,

 

I'd look into the Flip Plugin for this:

See the Pen OJqpQWP by GreenSock (@GreenSock) on CodePen.

 

https://gsap.com/docs/v3/Plugins/Flip/

 

Hopefully this helps

Happy Tweening!

[prakash24]

Hi @Rodrigo,

 

Thanks for your suggestion. I tried this with ScrollTrigger, I think It's working as expected on scroll, But when i scroll back, Snap scroll is happening first & after snap done, then width transition is happening. But I want both snap & width transition happen parallelly when i scroll back. Here I attached my codepen. 

 

And I'm adding container width to image's wrapper at page initial load, but i see image width changes on page load, but it should not, is there any possible to do avoid this.

 

See the Pen wBwXMWy by xpmpemne-the-sans (@xpmpemne-the-sans) on CodePen.

 

[Rodrigo]

Hi @prakash24,

 

Maybe something like this, it seems simpler IMHO:

See the Pen bNbxBmZ by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[prakash24]

Thanks! it’s working, i’ve to check the use of clamp.