Share Posted June 25, 2017 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 More sharing options...
Share Posted June 26, 2017 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 2 Link to comment Share on other sites More sharing options...
Author Share Posted June 26, 2017 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 More sharing options...
Share Posted June 27, 2017 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. 2 Link to comment Share on other sites More sharing options...
Author Share Posted June 27, 2017 tnx mikel ??? When two blocks are together. Each one does not work alone. See the Pen xrXqOG by milika (@milika) on CodePen Link to comment Share on other sites More sharing options...
Share Posted June 27, 2017 Hi milika, I forked your pen - html and css also: See the Pen OgObba by mikeK (@mikeK) on CodePen 3 Link to comment Share on other sites More sharing options...
Author Share Posted June 27, 2017 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 More sharing options...
Share Posted June 27, 2017 Hi milika, add a mouseleave function to tween all objects to the start position: See the Pen BZmJaR by mikeK (@mikeK) on CodePen 2 Link to comment Share on other sites More sharing options...
Author Share Posted June 28, 2017 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 More sharing options...
Share Posted June 28, 2017 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. 3 Link to comment Share on other sites More sharing options...
Share Posted June 28, 2017 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 ... 1 Link to comment Share on other sites More sharing options...
Author Share Posted June 28, 2017 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 More sharing options...
Author Share Posted June 28, 2017 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 More sharing options...
Share Posted June 28, 2017 Hi milika, Ok, ok ... I modified - see the above pen - the animation of 'textProject' plus some css attributes. 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