NuxtJS Gsap

[silverd 1 Likes (Newbie)]

Hello Guys

 

I have a question maybe it will be not clear but I hope  and if there is already an answer for this specific question pls let me know

so I have my portfolio app a nuxtjs app (vuejs) I have a loader so obviously it will be trigger only when you enter into my portfolio and it's working good but I would like to with the onComplete to pass a timeline.play to my first screen after the loading to start exactly after the loading ending

 

but my issue is I have no idea how to proceed I thought to use an $emit but it seem didn't work 

 

here my layout 

 

<div id="app">
<Loader/>
<Header/>
<nuxt />
<Footer/>
<BgDecor/>
</div>

 here my loader 

methods:{
init(){
const loader = document.querySelector('.loader')
const logo = document.querySelector('.loaderLogo')
const messages = document.querySelector('.messages')
const fillLogo = document.querySelector('#fillLogo')
const strokeLogo = document.querySelector('#strokeLogo')
let tl = gsap.timeline({
onComplete: function(){
console.log('fini')
this.loading = false
this.$emit(tlHome.play())
}
})

tl.set(logo, {scale: 3})
tl.set(messages, {autoAlpha: 0})
tl.to(logo, { duration: 3, opacity: 1 })
.from(strokeLogo, { duration: 6, drawSVG:"0" }, "-=2")
.to(logo,{ duration: 1, scale: 1 }, "-=4.5")
.to(strokeLogo,{ duration:1, opacity:0 }, "-=2.5")
.from(fillLogo, { duration: 1, opacity:0 }, "-=2.5")
.to(loader, {duration:.65, opacity:0, display:'none'})

//console.log("duration is: " + tl.duration());
}
},

mounted(){
this.init()
}

the fini is trigger the loading false a well but the tlHome is not recognised even if I tryed with this.tlHome.play()

 

I just hope someone had already a similar issue probably passing variables from sibling or parents child parents  is not the correct way for that but because Footer Header etc are split into components i would like to make sure the animation and timeline are triggering correctly when it's like that I tried to put a delay but obviously if I put a delay I have to use it only when the loader is called not everytime otherwise te home showing anim will be a bit long  

 

thanks anyway 

 

[ZachSaucier 7,123 Likes (Superhero)]

Hey silverd. Where is tlHome declared? 

 

Please make a minimal demo using something like CodeSandbox or StackBlitz if you'd like help debugging.

 

[OSUblake 18,471 Likes (Superhero)]

Not sure what you're trying to do. Can you create a simplified demo on codesandbox?

https://codesandbox.io/

 

Some things to note. You should use refs instead of document.querySelector.

https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements

 

And emit has 2 arguments, the first being a string.

https://vuejs.org/v2/guide/components.html#Emitting-a-Value-With-an-Event

 

 

[silverd 1 Likes (Newbie)]

Hahahaha  in fact I try just to know when my animation from a component is done like that I can start the other one 

my tlHome is my timeline from my <nuxt/> component index/home 
I was just hoping maybe someone have the same kind of issue because it's difficult to explain and difficult to share but my loader component have animation when it's done complete I would like to start the animation of my home one 
maybe I will try to use the states from VueX

[OSUblake 18,471 Likes (Superhero)]

It's very easy to trigger another animation using emit. The logo spins, then the links fade away.

 

https://codesandbox.io/s/aged-currying-tdk9o?file=/pages/index.vue

 

 

[silverd 1 Likes (Newbie)]

Hello 
here a link to my sandbox https://codesandbox.io/s/test-loading-u4485?file=/layouts/parts/Loader.vue

like you can see the emit is into the loader.vue maybe not the right place I never really understood this emit yet and how get the data inside the index.vue where the tlHome is because I have to do .play on this specific tl 

 

[OSUblake 18,471 Likes (Superhero)]

Just follow my demo.

 

Emit is done inside an arrow function.

gsap.to(this.$refs.svg, {
  rotation: 360,
  duration: 1,
  ease: "none",
  delay: 1,
  onComplete: () => {
    this.$emit("animation:complete");
  }
});

 

I'm listening for that event. It calls the fadeLinks method.

<Logo :width="350" @animation:complete="fadeLinks"/>

 

[silverd 1 Likes (Newbie)]

for your component your $emit is into the logo who is called inside the index.vue that I already saw plenty of example like that and it's quite common but I called my component loader on the layout default and like that is above the nuxt route the header and footer who are in the default.vue layout 

maybe I am totally wrong into my application splitting but I tried to organised everything into my default layout to be sure is everywhere if needed 

[silverd 1 Likes (Newbie)]

I will try your example maybe it will work thanks  sorry if I am not really clear it's not a child into a parent but more a child into a parents sibling of the parent I want to reach  anyway thank you

[OSUblake 18,471 Likes (Superhero)]

Then maybe you should create an event bus.

https://blog.logrocket.com/using-event-bus-in-vue-js-to-pass-data-between-components/