Jump to content
Search Community

3 Divs in a row acting separately while last div fill full-width

KiwiVFX test
Moderator Tag

Go to solution Solved by nico fonseca,

Recommended Posts

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

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

  • Solution
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

  • Like 2
Link to comment
Share on other sites

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!!! :)

  • Like 1
Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

Looks like that after this one it will be solved :P
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 by KiwiVFX
Codepen
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...