Jump to content
Search Community

NuxtJS Gsap

silverd test
Moderator Tag

Recommended Posts

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 :D 

 

thanks anyway 

 

Link to comment
Share on other sites

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

 

 

  • Like 3
Link to comment
Share on other sites

Hahahaha :D 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

Link to comment
Share on other sites

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"/>

 

  • Like 1
Link to comment
Share on other sites

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 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...