Kutalev

Ah! I guess I didn't understand at first how to use Flip correctly. Thank you!

Hello everyone! Could you, please, help me with a flip animation. I'm trying to transform a blue circle to a dynamic modal window appended to body. I guess what I made is ... a solution. But I'm sure there should be much cleaner and better way to do this) Black squares are some elements with unknown z-index or in different DOM nodes.

Thank you! I knew I was close, but too tired to find it)

Hello! Could you please help me to realise what am I doing wrong. I'm trying on hover play an animation only on one element, but they work simultaneously. I thought maybe it's because of id attribute inside of svg, but doesn't looks that way.

Ahh. Thank you!? There are really still a lot to learn about gsap)

Thanks! I rewrote the code using functions - looks much better)) But still have a small problem. Clicking two fast pushes animations in a line even with overwrite. So all of the triggered animations will play till the end. Is there anyway to stop it? Kind of stopping everything and playing only the last tween? https://codepen.io/kutalev/pen/dyXPOMb

I thought tweenTo creates a tween between current state and the one I choose skipping others. I guess, I'm missing something)

Zach, thank you for the answer! Two dimmers I was needed just in the case - the one covering the whole area except navigation and another one with dark background below. I suppose my question was a bit messy) The main idea I'm trying to understand, is that a good practice to separate logic and settings with labels for complex and interactive animations. Let's say I have a circle with different states, where labels, kind of, describing the state. I made a simple codepen to describe what I mean. But even here it'n not working as I expected. Feels like it's going throw all of the states from the one I choose. https://codepen.io/kutalev/pen/eYzmZvP I believe this separation it's simpler, but maybe it's not a good practice somehow and in the future it may backfire? // animation settings circle_tl .to(circle, {width: 200, height: 200}) .add('bigger') .to(circle, {width: 50, height: 50}) .add('smaller') .to(circle, {borderRadius: 0}) .add('square') .to(circle, {rotate: 180}) .add('turn') .to(circle, {background: 'rgb(' + get_random(255) + ', ' + get_random(255) + ', ' + get_random(255) + ')'}) .add('change_bg') .to(circle, {opacity: 1}) .add('show') .to(circle, {opacity: 0}) .add('hide') // animation logic function animateCircle(action) { document.getElementById('result').innerText = 'action: ' + action; circle_tl.tweenTo(action) } const buttons = document.querySelectorAll('.button'); buttons.forEach(button => button.addEventListener('click', () => animateCircle(button.dataset.gsap)))

Hi everybody! I have a problem configuring a menu animations. That's my 5th version. I realised the best way is to use master timeline. But, trying to put it all together, I get an unpredictable behavior. Animation for showing/hiding dimmer works great. dimmer_tl .fromTo(dimmer, {opacity: 0, display: 'block'}, {opacity: 1}) .set(js_dimmer, {display: 'block'}) .add('show') .to(dimmer, {opacity: 0, display: 'none'}) .set(js_dimmer, {display: 'none'}) .add('hide') dimmer_tl.tweenTo('show'); dimmer_tl.tweenTo('hide'); But truing to do the same with menu background doesn't work :( bg_tl .fromTo(bg, {opacity: 0, display: 'block'}, {height: 200, opacity: 1}) .add('show_list') .fromTo(bg, {opacity: 0, display: 'block'}, {height: 100, opacity: 1}) .add('show_search') .to(bg, {opacity: 0, display: 'none'}) .add('hide') bg_tl.tweenTo('show_list'); bg_tl.tweenTo('hide'); It feels like the animation on show_list is not pausing and going threw all of them bg_tl .fromTo(bg, {opacity: 0, display: 'block'}, {height: 200, opacity: 1}) .add('show_list') // .fromTo(bg, {opacity: 0, display: 'block'}, {height: 100, opacity: 1}) // .add('show_search') // .to(bg, {opacity: 0, display: 'none'}) // .add('hide') Or maybe I'm trying to reinvent the wheel and there are better practices to control? I'm glad to hear any suggestions. Thanks! P.S. Also moving mouse really fast between links play a timeline through all of them. I guess I need to add a delay somewhere but every time I do so it's just breaking apart.

Wow, it really did the thing! Thanks a lot! ))

Hi! I'm trying to pin an element with all content above and under during some animation, like changing background color, but rather I didn't understand it correctly or something wrong with the behavior. Could you, please, help with the problem :)