r3plica
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by r3plica
-
-
So, you can do that without any issues:
https://codesandbox.io/s/nostalgic-spence-ikk2nb?file=/src/App.vue
But this is not going to work in my application. The reason I am trying to implement the transition is because I am using it for a menu. So the individual elements are not on the dom. When they appear, then I want the animation to start, then when they disappear I want to the animation to reverse (before they are removed from the dom).
That is the purpose of the transition block.
Are there no vue people here that can help? I appreciate everyone's replies though!
-
Does anyone else know how to help with this? I have added the element to the leave .fromTo, but as mentioned, it still crashes
-
Hey all,
I am trying to animate an element with a height.
So far I managed this:
https://codesandbox.io/s/awesome-nash-v2tfn3
But as you can see, when I press the button for a second time I would like the animation to collapse slowly and fade out.
I tried to do this:
https://codesandbox.io/s/silly-zhukovsky-6bngdu
But when I add before-leave and leave it just errors when I try to collapse the element.
Does anyone know what I am doing wrong?
- 1
-
Thanks @mvaneijgen, that video was awesome and thanks @Carl for providing the demo. I actually watched the video and found the link in that before seeing you had posted here but it works perfectly
-
https://codesandbox.io/s/mm49z4?file=/src/App.vue
This is as close as I have got by using your suggestion, but it's still not right.
-
Ok, I am getting a bit closer. I have this now:
https://codesandbox.io/s/spring-smoke-b1kmgp
All I need now, is to start moving the text up before the next one comes into view. Any help with that?
-
-
Hi, thanks for that. I have created this example:
https://codesandbox.io/s/vigorous-pascal-s258v3
As you can see, it doesn't stop in the middle. In my application, it does stagger, so not sure why it doesn't in this example.
Like I mentioned, I am trying to replicate this:
-
I think it's because of codepen; I don't use vue like that, I use vue with composition api and it does an animation, but not what I was expecting. I will see if I can get composition api working
-
I have added a simple codepen; it doesn't seem to do anything, but it should be enough for you to see what I am trying to achieve
-
I have seen some of the topics here, so this should be relatively simple, but I am new and can't figure it out.
I would like to create an animation of text like this:
I have tried to create a component, the html looks like this:
```
<transition-groupclass="animation-container"name="staggered-fade":css="false"appearv-bind="$attrs"@before-enter="beforeEnter"@enter="enter"><h2class="h1 mb-0":class="heading.colour"v-for="(heading, i) in headings":data-index="i":key="i">{{ heading.title }}</h2></transition-group>```
The code behind looks like this:
```
import { defineComponent, ref } from "@vue/composition-api";import gsap from "gsap";export default defineComponent({name: "Business",setup() {const duration = ref(0.4);const headings = ref([{ title: "discover", colour: "text--pale-blue" },{ title: "experience", colour: "text--bright-blue" },{ title: "shop", colour: "text--blue" },]);const beforeEnter = (element) => {element.style.opacity = 0;element.style.transform = "translateY(50px)";};const enter = (element, done) => {console.log(element.dataset.index);console.log(element.dataset.skip ?? 0);console.log(duration.value);console.log((element.dataset.index - (element.dataset.skip ?? 0)) * duration.value);console.log("---------------------");gsap.fromTo(element,{opacity: 0,y: 0,duration: duration.value,delay:(element.dataset.index - (element.dataset.skip ?? 0)) *duration.value,onComplete: done,},{opacity: 1,y: 100,duration: duration.value * 2,delay:(element.dataset.index - (element.dataset.skip ?? 0)) *duration.value,onComplete: done,repeat: -1,});};return { headings, beforeEnter, enter };},});```
The animation I am getting is not doing what I had hoped. Can someone point me in the right direction?
Your help would be greatly appreciated.
Animate height on enter and leave using vue composition api
in GSAP
Posted
So I fixed it, I found someone mentioning a bug (not related) using vue. Their code example was a sidebar:
https://codesandbox.io/s/gsap-v3-jump-bug-in-vue-3272l?fontsize=14&file=/src/components/Sidebar.vue:498-961
When the bug was fixed, it fixed his issue. So I took his code and just changed it for height instead:
https://codesandbox.io/s/wandering-field-69kli4?file=/src/App.vue
I had to remove any CSS i had before and to a fromTo when enter is triggered, but at least it's not crashing.
Thanks for your help guys, I think this is the solution.