Jump to content
Search Community

Responsive text column to Image

KiwiVFX test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

Hello Gals and Guys,
Attached automated version, that would be the most complex scenario with manual controls(second link).
I'm trying make text start from starting point (as without image) and grow(pushed) only when image is being animated in. Do the same if image was taken out(while text is in).


(Please use in full screen to see animation properly)


See the Pen RwgjrjM by KiwiVFX (@KiwiVFX) on CodePen

Link to comment
Share on other sites

1 hour ago, Cassie said:

Hey there Kiwi! 

I've read through this a few times and I'm not quite sure what you're asking.

Maybe you could draw a little diagram to explain? Or possibly rephrase? Apologies!

All good, I'll try rephrasing first.

If you are in Full-Screen, you can see text being revealed from undesirable position, image being added, Image disappearing (text should adjust, now it snaps - i'm trying to achieve more control over it at this exact animation point of time) and finally text is being animated out.
Currently what bugs me is that, is that at the start text isn't aligned to the start of the block at the beginning and i would like to move text column with image (when it's being taken out) so it will fill the container.

If it's still to complex - i'll create an animation example.


Link to comment
Share on other sites

  • Solution

There would be several ways to handle this animation, but I think an easy solution would be to use overflow:hidden on your parent container which is animated from a width of 0 and then animate the two child divs (image and text) accordingly. Here's a fork of your pen. I've added some padding to the child text group so it doesn't get clipped when the image appears. Hopefully this gets you started in the right direction. Happy tweening.


See the Pen c021734385ff870f52b9c574cfef5703 by PointC (@PointC) on CodePen

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