Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
milika

move with hover mouse (help)

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

 

1- block-detile

2- block-date

 

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

Hi milika,

 

I forked your pen - html and css also:

 

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

 

  • Like 3
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Hi milika,

 

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

 

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

 

 

  • Like 2
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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 ...

 

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Hi milika,

 

Ok, ok ...

 

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

 

  • Like 1
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.
×