GSAP Flix and Timeline seem not to work together

avarezhnikova · August 12, 2023, 4:22pm

May be I do something wrong as I am new. But…

I am trying to animate my sticker header. It is a complex animation that needs elements to change layout + one element is scaled and transmitted.

I use GSAP flip actions to add classes to elements with final state. And I created a timeline for the scaled&transmitted element. + 2 add class actions for element to delay few css changes.

All classes are desctibed in external file (not in bricks interface)

And I have put all actions on Scroll Position event. It seems to work glitchy. It SOMETIMES works fine, but mostly not. Tineline animated element should be scaled and become transparent, but animates with convulsions it returns in the end. I see a “brf-reset-transition” class in Inspector. If I set a delay of 4000ms on timeline action - it works perfect. But it’s too big delay. Duration of all previous animations is 1s or less.

There is also a problem with Flip. You will see on the video that sometimes the logo also have convulsions (when I stop scrolling very close to the “borderline” scroll position ), jumps to the position where it should not be at all. And menu items are moving a bit after the transition is over.

here is the screencast of the problem https://youtu.be/I3nzqd2cF8Y (video is restricted with link access)
here is the address of the page https://biezoender.avar.com.ua/

Here are the classes added during the animation:

.header-container-scroll {
align-self: center;
align-items: flex-end;
flex-direction: row;
display: flex;
justify-content: space-between;
}

.header-logo-wrapper-scroll {
flex-direction: row;
align-self: flex-start;
max-width: 300px;
margin-top: 1rem;
margin-bottom: 1rem;

{padding-bottom:0;} }

.top-menu-scroll {
margin-bottom: 0;
}

.adress-scroll {
top: 1rem; flex-direction: column; align-items: flex-end;
>i {font-size: 30px !important;}
}

here is the text of JSON export of instance (in case you need it to reproduce)

{“name”:“Header Scroll Animation 1”,“id”:“4470667f-c8a4-9f93-4754-ec9b891016fa”,“selector”:“”,“event”:“scrollPosition”,“actions”:[{“id”:“e14f2215-851d-4cc8-7ab0-4907b468777a”,“action”:{“label”:“GSAP Flip”,“value”:“gsapFlip”,“gsapSetObject”:“{}”,“target”:“custom”,“targetElement”:“#header-logo-wrapper”,“flipStylesInput”:“addClass”,“flipStylesInputClassName”:“header-logo-wrapper-scroll”,“flipDuration”:1,“flipIncludeChildren”:true,“flipEase”:“power1.out”},“conditions”:},{“id”:“6d388c19-74ec-b964-5762-e149c6306273”,“action”:{“label”:“GSAP Flip”,“value”:“gsapFlip”,“gsapSetObject”:“{}”,“target”:“custom”,“targetElement”:“#top-menu .bricks-nav-menu”,“flipStylesInput”:“custom”,“flipStylesCode”:“target.style.justifyContent = "end"; \ntarget.style.gap = "3.5rem"; “,“flipDuration”:0.7,“flipIncludeChildren”:true,“flipEase”:“power1.out”,“flipStylesInputClassName”:””},“conditions”:},{“id”:“bd3ae1b5-3757-b5c8-36fa-e935c6882fe0”,“action”:{“label”:“Add Class”,“value”:“addClass”,“gsapSetObject”:“{}”,“target”:“custom”,“targetElement”:“#header-container”,“cssClass”:“header-container-scroll”,“delay”:60},“conditions”:},{“id”:“e9e5dcf0-204d-40cf-3552-64932c9fab2b”,“action”:{“label”:“Add Class”,“value”:“addClass”,“gsapSetObject”:“{}”,“target”:“custom”,“targetElement”:“#top-menu”,“cssClass”:“top-menu-scroll”,“delay”:120},“conditions”:},{“id”:“6ea69de9-2457-ae61-d17a-53a091e3a576”,“action”:{“label”:“GSAP Flip”,“value”:“gsapFlip”,“gsapSetObject”:“{}”,“target”:“custom”,“targetElement”:“#adress”,“flipStylesInput”:“addClass”,“flipStylesInputClassName”:“adress-scroll”,“flipIncludeChildren”:true,“flipDuration”:0.7,“flipEase”:“power1.out”},“conditions”:},{“id”:“93e9ba75-7f71-2bdf-390c-b9a5c9a6432c”,“action”:{“label”:“GSAP Timeline”,“value”:“gsap”,“gsapSetObject”:“{}”,“animationAction”:“play”,“animationTimeline”:“e5fab112-9d92-12c7-2519-67d7f801bc86”,“animationSelectorType”:“all”,“delay”:1500},“conditions”:}],“selectorType”:“exactly”,“consoleLog”:“none”,“display”:“block”,“mutationObserverAttributes”:true,“conditions”:,“conditionsRelation”:“and”,“loadOnChoice”:“everywhere”,“preventDefault”:false,“loadOn”:“”,“disabled”:true,“folder”:0,“scrollPositionOperator”:“>=”,“scrollPosition”:“150”}

Daniele · August 13, 2023, 8:34am

Hey! The problem here is that your event Scroll Position > X will fire multiple times, because also on further scrolling the condition stays true. Playing a timeline 1000 times will cause such behaviors I think it would make sense to add a checkbox “Fire once” or so. This would solve your issue directly.

If you’re advanced, after knowing the issue you can create something yourself. A simple using would be to add a class on scroll position > x and after the timeline plays for the first time…and only if this class not exists (you can use action conditions), play the timeline.

It’s also important that your animated elements does not have css transitions. This will immediately break the GSAP stuff.

Will think about an out of the box solution here

avarezhnikova · August 13, 2023, 8:10pm

Adding conditions to event and to GSAP timeline (checked one of the classes added by GSAP flip) didn’t not help. BUT I reproduced the sequence again one by one and found that glitches occure when parent container and a child are animated simultaneousely.

I have 2 cases of this.

I use GSAP Flip to make the container (adress) change flex-direction, so that included elements smothly move to their new locations (adress-icon and adress-text). And had a timeline to have the text collapse into icon. The GSAP Flip duration is set to 1s. So it would be logical, that if I delay the timeline for 1000ms, it will not conflict with parent. But this delay is not enough. Only 4000 works fine.

GSAP Flip has no sense without animation of children. It works just like “add a class” action now, and my adress icon abruptly jumps to the new position, but text behaves fine now…

I have a menu nav GSAP Flip to change menu’s gap and justify-content setting. And in the same sequence I have an “Add class” action for its parent container to change its flex alignments. This causes glitch in GSAP Flip - first menu item behaves incorrectly. I tried to modify the order of actions, but it didn’t help. I put Add class first or last in a sequence, the glitch happens any way.

I am not advanced in Javascrips, just some basic knowledge ). Currently I don’t know the solution. I will try to put everything in one class where both parents and children are described… Or (if possible) rearrange the structure of elements to avoid parent and child animation…

I have found the solution of back-&-force scrolling glitch. My scroll down position that starts the header animation is 150. But the position for reverse animation is set to 0. It works fine now.

BTW. Having a possibility to disable actions in the sequence would be VERY handy for such debug. I had to add them from scratch one by one to find the items that cause the glitches. And also it would be very handy if clicking an action scrolled the settings panel to the chosen action. Having 7 actions as I do makes navigating the action settings pretty hard.

First 3 menu items still behave weird, even when it is the only action . They keep moving a litte bit during further scrolling, while the other 3 are still. May be it makes sense if you check “include children”. the glitch is bearable, though I suppose it shouldn’t be so. (I add a screenshot of my GSAP Flip settings)

The page: https://biezoender.avar.com.ua/ (I keep all enabled now if you need an illustration for this long read )). Sorry for many details, but I understand that any minor detail is important.

avarezhnikova · August 14, 2023, 11:44am

This seems to be a bug.

Shortly: when timeline (with translate) is combined with Gsap Flip it initiates an extra translate rule (each second run) that results in wrong positioning of the target element. I have put delay 10000 between Flip and Timeline, but it does not help.

Please check the video.

avarezhnikova · August 15, 2023, 3:59pm

Update. To overcome the glitch above I have put a GSAP Set action to set the correct values for transform. And now the reverse animation works perfect.

Daniele · August 15, 2023, 4:15pm

Thank you for your very detailed descriptions! I appreciate that. And I’m glad that the animation works well for you now I’ll have a look at it after my holiday anyway! So, thank you very much!