move with hover mouse (help)

[milika]

hi

i want these actions to occur when the mouse enters in class of  "block-detile"

  the width of "line-type" reduces , the "text-type" moves left and "text-info" appears

 

and when mouse goes to another side, return to its main states

See the Pen xrXqOG by milika (@milika) on CodePen.

[Carl]

it sounds like you would need a timeline that you play and reverse on mouseenter / mouseleave.

Something like this:

 

See the Pen mwBBYZ?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

To change the timing of each animation be sure to study the position parameter

[milika]

hi carl tanx . but i have another problem: how this works if there are two different classes ?

 

1- block-detile

2- block-date

 

[mikel]

Hi milika,

 

I´m not sure what you mean. 2 classes = 2 'buttons'?

 

If so look at this example:

 

See the Pen qrgVve by mikeK (@mikeK) on CodePen.

 

 

If not please provide a modified codepen.

[milika]

tnx mikel

???

When two blocks are together. Each one does not work alone.






    See the Pen xrXqOG by milika (@milika) on CodePen.

[mikel]

Hi milika,

 

I forked your pen - html and css also:

 

See the Pen OgObba by mikeK (@mikeK) on CodePen.

 

[milika]

tnx mikel

How to get back to the original after leaving the mouse?

Now in the code above, one of the objects remains in the same state after leaving the mouse.

[mikel]

Hi milika,

 

add a mouseleave function to tween all objects to the start position:

 

See the Pen BZmJaR by mikeK (@mikeK) on CodePen.

 

 

[milika]

hi thanks mikel

for your correct answer.

i send another codepen in which the movement of each part is different how to these to work to together ?

 

See the Pen mwprMr by milika (@milika) on CodePen.

 

[mikel]

Hi milika,

 

You need in both buttons the same classes for the animation:

 

See the Pen EXoZbE by mikeK (@mikeK) on CodePen.

so use separate classes for style in addition.

[mikel]

Hi milika,

 

Please be aware that you have different styles: mirror inverted.

 

So you need to adjust style and add a tween - for example the right line.

I tried it in the pen above ...

 

[milika]

hi mikel

 

ok. but still there is a problem with the type project. it should move to right and close to the right line but it moves to the left

[milika]

21 minutes ago, mikel said:

Hi milika,

 

Please be aware that you have different styles: mirror inverted.

 

So you need to adjust style and add a tween - for example the right line.

I tried it in the pen above ...

 

i get it.

i changed that and now it works .

 

thank you .

i like greensock

[mikel]

Hi milika,

 

Ok, ok ...

 

I modified - see the above pen -  the animation of 'textProject' plus some css attributes.