Animation Ease not working with Bricks Popup Template

Hey, guys I notice that the animation-timing-function( EASE ) is not working from the Popup Template I created. I tried all the EASE animations but none of them seemed to work. It could just be me or could be a setting issue I made, but I just wanted to report it. :slight_smile:

And just to note it does work the animation on the backend but the front end doesn’t show it.

Hey Scarly! :slight_smile:

In this case, it will be a timing problem I guess. When your GSAP animations are initiated, the popup is already in the DOM and your “Page Load” event will fire the animations before the popup opens. Therefore you see no animation after opening the popup.

You could create a MutationObserver (Events Tab) and observe the popup classes / attributes. This way you could restart your timeline everytime the popup opens…and you’re animation will work as expected :slight_smile:

1 Like

Hey Daniele, thanks for the reply as always! I just tried in events to put MutationObserver and for it to observe attributes; however, still seems to have the same problem where it ignores the EASE animation.

You can check my website again if you like!

1 Like

Just checked it with @ScarlyDesigns It works well with MutationObservers. The Easing issue was caused by the native Bricks Interaction in combination with the GSAP animation. Removing the Interaction, the animation easing works too. I mark this thread with “No Bug”. :slight_smile:

1 Like