KiwiVFX Posted September 15, 2021 Share Posted September 15, 2021 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 More sharing options...
Cassie Posted September 15, 2021 Share Posted September 15, 2021 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! Link to comment Share on other sites More sharing options...
KiwiVFX Posted September 15, 2021 Author Share Posted September 15, 2021 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 More sharing options...
KiwiVFX Posted September 15, 2021 Author Share Posted September 15, 2021 Comp 1.mp4 Link to comment Share on other sites More sharing options...
Solution PointC Posted September 16, 2021 Solution Share Posted September 16, 2021 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 5 Link to comment Share on other sites More sharing options...
KiwiVFX Posted September 16, 2021 Author Share Posted September 16, 2021 Exactly on point! Thanks a lot, now everything makes sense :)! 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