BrianT

My gosh thank you! When I first found scroll-behavior: smooth, I thought it was a godsend until I realized it didn't work in Safari. Then I turned to gsap who saved the day for me (again)! That said scroll-behavior: smooth was still being applied in my CSS and probably wouldn't have realized it if not for you. Cheers!

Thank you PointC! That is what I was trying to do. I originally set both .a and .b to absolute which was also not working making me think I was going about it the wrong way. I now feel like I understand positioning better. Admittedly I have been avoiding it as much as possible since I have been able to do almost everything I need to with flexbox. Cheers!

Thanks for the response! It does work but I wanted to keep the elements inside the flex container so it creates a new problem. https://codesandbox.io/s/dazzling-rumple-hzd7c?file=/src/App.vue I know this is more of a CSS problem and not GSAP so sorry about that. Folks here are really helpful and responsive though.

Hello, I want Element A and Element B to both occupy the same spot when they animate in and out. I know that changing the opacity does not remove the element so they still stay "stacked" however I just can't seem to find a way to accomplish the desired behavior. Hopefully this sandbox makes it easier to understand what I want to do. https://codesandbox.io/s/dazzling-rumple-hzd7c?file=/src/App.vue

@nicofonseca that is exactly what I was trying to do. It seems my issue was with basic javascript lol. Thank you so much.

Thank you for the response OSUblake! Basically all I'm trying to do is to define an animation timeline and store it in a variable so I can use timeline/tween methods like play, pause, restart, etc on the timeline animation. I added a bit to the code sandbox you linked. I hope what I'm trying to do is clear/makes sense. It seems like it should be very doable but for whatever reason I can't seem to figure it out. https://codesandbox.io/s/distracted-swirles-8l77p?file=/src/views/Home.vue

Hello, I am having trouble referencing my GSAP timeline using Vue 3 composition API. I am having no problem running the timeline when the component is mounted as follows. I am trying to store this timeline in a variable so I can use different methods such as play(), pause(), reverse(), etc. But am having problems getting that to work. When I run this code the animation does not work. I know this might be more of a Vue related question than a GSAP one but I'm really hoping there's someone here who can help me out with this. Thank you, -Brian