[Flip animation]

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

[Flip animation]

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.

See the Pen NWXaLRd by kutalev (@kutalev) on CodePen

[Simultaneous animation]

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

[Simultaneous animation]

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.

See the Pen qBPQvBx by kutalev (@kutalev) on CodePen

[Problem with timeline animations]

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

[Problem with timeline animations]

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?

See the Pen dyXPOMb by kutalev (@kutalev) on CodePen

 

[Problem with timeline animations]

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

[Problem with timeline animations]

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.

 

See the Pen eYzmZvP by kutalev (@kutalev) on CodePen

 

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

[Problem with timeline animations]

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.

 

 

See the Pen ZEOELmB by kutalev (@kutalev) on CodePen

[Problem with pinSpacing]

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

[Problem with pinSpacing]

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 :)

See the Pen qBbQgXy by kutalev (@kutalev) on CodePen