[Problems with scrollTo in Chrome]

On 1/31/2020 at 6:55 AM, amort2000 said:

Hi Zach,

I found the guilty style-rule and thought it worth mentioning on this forum.

I'd been experimenting with an experimental css property and had tried at some point scroll-behaviour:smoothbut hadn't detleted it from my stylesheet.

It really messed with scrollTo in Chrome (understandably)

 

thanks again for y our help

 

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!

[I want two elements to occupy the same space when they animate in and out]

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!

[I want two elements to occupy the same space when they animate in and out]

34 minutes ago, PointC said:

Maybe I'm missing something here, but wouldn't setting position:absolute work?

 

.parent {
  position: relative;
}
.a,
.b {
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  position: absolute;
  white-space: nowrap;
}

 

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.

[I want two elements to occupy the same space when they animate in and out]

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

[GSAP timeline reference in Vue]

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

[GSAP timeline reference in Vue]

1 hour ago, OSUblake said:

Hi BrianT!

 

I don't know Vue 3 that well, but I'll look into it if you can put something up on CodeSandbox. Here's a starter template for you.

https://codesandbox.io/s/gsap-vue-3-starter-p46tu?file=/src/main.js

 

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

[GSAP timeline reference in 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