Jump to content


NuxtJS Gsap

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

 here my loader 

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(){
this.loading = false

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());


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

Hey silverd. Where is tlHome declared? 


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


Link to comment
Share on other sites

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



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



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




  • 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

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 


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: () => {


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

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 :D anyway thank you

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.