Roman Kovalev

Ok. Cool! Thanks for a suggestion. I appreciate that and will follow your advice.

Hey, there! Is there a way to update the value inside tween when getting the animation reversed? For now I need some kind of fake preload animation, before modal window loads, so I'm using delay parameter with a variable value . But when I'm closing modal window (by clicking on a background layer), animation reversing but considering that delay. Is there a way to change that variable value on reverse?

Thank you guys for your clues and solutions. Will let you know in a while, what helped better.

Hi, there! I'm making a common accordion for a project that uses GSAP. But faced with the following issue. When I animate element like : tl.from(element, .5, { height: 0 }); ... it takes the initial height of element (which consists of content inside it), but when I change throught media query, for example, the font size, it is obvious that the height of element reduces. But it still uses the initial height. So I have spaces on the bottom, because of initial height. Is there a way to update the calculation of height, when somthing changes in css or maybe on resizes?

My appologies for not asking right. Set the width of a pen to 600px, it goes to a mobile version. Then click on headings. They have to open the list of submenu links animating height and submenu elements appearance. When you go back to a "desktop" version (upper then 600px) the block becomes as a simple grid. Then back to "mobile". And animation crushes: not setting right height or submenu elements dont appear from left to right.

Hey, there! I'm woking on collapsing menu elements with GreenSock. The idea is to create elements to appear on desktop as it is, but in mobile version it goes like accordion. And I have experienced some kind an issue. I need GreenSock to work in mobile only and when I'm back to desktop - greensock stops its functionality. So far I' m using flags to understand if the version is mobile and clear tweens via clearProps:"all" (dont think its the best approach). And the issue is: when I'm switching between mobile and desktop versions some time (often) menus are not collapsing, or collapsing with the wrong height size, or with wrong appearance of menu elements. I've made codepen example. Can you, guys, point me whats wrong?

Thanks! Will take it into a count.

Have faced that need to work with a multiple "from" tweens with a same element. Of course that gave me a wrong experience with using such a "structure", like: tl.from(Intro_logo, .5, {opacity: 0}) //bla bla other tweens tl.to(the.Intro_logo, 0.25, {opacity: 0}, 'second_frame_start') //bla bla other tweens tl.set([Copy, Intro_logo], {className:"+=next-step"}) //bla bla other tweens tl.from(Intro_logo, 0.75, {opacity: 0, x: '-30%'}) will give me the result that my Intro_logo will have on the very beginning of the animation the positioning of x: -30% (as example). How can I figure it out? Because, with my current job I will have to challenge it always. Thanks in advance!

Aha, I missed one to have .add. I remember that there was something for this. thanks for a clue!

Making an animation, and the question appeared : I need to animate one tween while other tweens are animating. Sorry the code is too big, so will cut it: TimelineMain.to(the.Second_frame_bg_1, .75, {scale: 1.3, autoAlpha: 1, ease: Sine.EaseOutIn}, 'second_frame_step_1'); TimelineMain.to(the.Second_frame_bg_1, 4, {scale: 1.2, x: '-40px', ease: Sine.EaseOutIn}, 'move_right'); //I want this tween to be animated while next one tweens are animating TimelineMain.staggerFrom([Destination_city_1, Destination_price_1], 0.7, {scale: .3, opacity: 0, ease: Sine.EaseOutIn}, .15, 'second_frame_step_1'); TimelineMain.from(Destination_cta, 1, {y: '50%', opacity: 0, ease: Back.easeOut.config(1.7)}); TimelineMain.from('.destination_info', 1, {opacity: 0});

For each element it... Haven't even thought about that! Brilliant! Thanks, you made my day.

Hello, there. Making a very simple hover effect with GreenSock and faced the issue I can not explain (maybe experience is not enough). I have a menu bar and with a hover I'm showing the sub menu options. When mouse is out - reverse the animation. But the animation is not happening again. Why ? What am I missing ?

Hey, guys! I'm making smooth tab switchers with GSAP help. So I faced on trouble: when I click on different tab buttons (quickly) and animation hasn't stopped from previous elements the next element starts its animation. Any help ? UPD Oh, fixed.... Ask the right question and answer it yourself.

Ok, I've got an idea! Thanks!

Not really. Imaging the element scales from 1 to 0.33 and while its scaling it shakes (rotation to left and to right while the whole animation) and when its back to scale 1 rotation sets to 0.