KiwiVFX Posted September 10, 2021 Share Posted September 10, 2021 Hello guys and gals, I have 3 divs(each one should respond to other) which should fill 92...% of the screen, last div (if on..) should fill all 92...% width, with or without first and second values. Been trying to tackle it for a day, GSAP doesn't start from 0 of the div, some why there is a left over of div, Almost 100% sure it's not GSAP issue, just trying to solve the issue and take proper approach. Thanks in advance. See the Pen qBjZwbq by KiwiVFX (@KiwiVFX) on CodePen Link to comment Share on other sites More sharing options...
nico fonseca Posted September 10, 2021 Share Posted September 10, 2021 Hey @KiwiVFX, welcome to the forum! 💚 That is more like css issue because if you need width:0 with padding you need to set in the child element. See the Pen c497e89ba1c9931e8fc2c6a5a142fe17 by nicofonseca (@nicofonseca) on CodePen 3 Link to comment Share on other sites More sharing options...
KiwiVFX Posted September 10, 2021 Author Share Posted September 10, 2021 Amazing! Thank you for response! You've added Query Selectors to find the parent div and apply it to children? Last question, Why i can't target value-three with query selector as well? I need to cut it(wipe) from left to right as seen in inThirdValue within JS. Link to comment Share on other sites More sharing options...
Solution nico fonseca Posted September 10, 2021 Solution Share Posted September 10, 2021 15 minutes ago, KiwiVFX said: You've added Query Selectors to find the parent div and apply it to children? Last question, Why i can't target value-three with query selector as well? I only used querySelector to get the div child from valOne/valTwo and set the innerHtml. 20 minutes ago, KiwiVFX said: I need to cut it(wipe) from left to right as seen in inThirdValue within JS. I don't know if I understand what you need, but the clip animation is not doing anything. Also, you need to use clip-path instead of clip as it is deprecated, you can learn more here. I leave you an example of a clip-path animation 🙂 See the Pen 4fc55558b1a5fc49a4170e4b6031aa59 by nicofonseca (@nicofonseca) on CodePen 2 Link to comment Share on other sites More sharing options...
nico fonseca Posted September 10, 2021 Share Posted September 10, 2021 Another thing, you should use it like this: const tl = gsap.timeline(); tl.from(el,{...}) instead of: const tl = gsap.timeline(); const inTwoFirstValues = tl.from(el,{...}) inTwoFirstValues; 1 Link to comment Share on other sites More sharing options...
KiwiVFX Posted September 10, 2021 Author Share Posted September 10, 2021 2 minutes ago, nico fonseca said: I don't know if I understand what you need, but the clip animation is not doing anything. Also, you need to use clip-path instead of clip as it is deprecated, you can learn more here. I leave you an example of a clip-path animation 🙂 That's it. I wanted it on the third child. i'll make it work from here, thanks a ton, you were a lot of help!!! 1 Link to comment Share on other sites More sharing options...
KiwiVFX Posted September 10, 2021 Author Share Posted September 10, 2021 Just now, nico fonseca said: Another thing, you should use it like this: const tl = gsap.timeline(); tl.from(el,{...}) instead of: const tl = gsap.timeline(); const inTwoFirstValues = tl.from(el,{...}) inTwoFirstValues; True, i've done different approach before, those are just left overs, I'll take in account tho, Will do it cleaner - You are right. 1 Link to comment Share on other sites More sharing options...
KiwiVFX Posted September 10, 2021 Author Share Posted September 10, 2021 (edited) Looks like that after this one it will be solved I've had before condition in css if value is empty - don't show empty div, now it doesn't work. The scenario is only Third value was inserted. 2 First values are being empty and the div has trail 😕 As final result they have to be responsive one to another and work with/without others. See the Pen Rwgpzmd by KiwiVFX (@KiwiVFX) on CodePen Edited September 10, 2021 by KiwiVFX Codepen Link to comment Share on other sites More sharing options...
nico fonseca Posted September 10, 2021 Share Posted September 10, 2021 Something like this? 🙂 See the Pen f7401218a6d6adac9fa8567fb2f580af by nicofonseca (@nicofonseca) on CodePen or animating each element See the Pen b6044cbd184a6019346683d1ead98dfb by nicofonseca (@nicofonseca) on CodePen 2 Link to comment Share on other sites More sharing options...
KiwiVFX Posted September 10, 2021 Author Share Posted September 10, 2021 First should do the job flawlessly. i took away queryselector from my code and it worked as expected... I'll learn more on the subject. Thanks a ton - have a great weekend! 1 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