martis

vue (nuxt) component timelines merged into one timeline

Recommended Posts

Hi all,

 

Need advice on a general approach. Just started using Vue (nuxt). I’m building a site with say three components. Scene1, scene2 and scene3 inside a Site component. I want to keep the animation for each scene contained within the component Vue file. I then want to create a master timeline in Site that I can control as a user scrolls. 

 

I know how to create timelines and add timelines to other timelines, need advice on how I do it within Vue.

 

Curious if any Vue experts have advice on how to create the timelines in each component then merge them in a parent Site component. Or if this approach is bad :)

 

thanks!

Share this post


Link to post
Share on other sites

Hi @martis!

 

I've got some experience with Vue but none whatsoever with nuxt.

 

The way I structured my last Vue project was having the animations totally separated from the actual components - The oposite to what you are asking... - But in modules that could be accessed from different points.

 

Something like:

 

> folder: animations

> > Shared.js

 

> folder: components

> > Component.vue

 

The the code would be something like:
 

// Shared.js
export default {

 dur: 1,

  svgDecoratorIn( el ) {

    const trg = el + ' path'

    return TweenMax.staggerFrom( trg, this.dur, {
      drawSVG:'50% 50%',
    }, 0.2 )

  }

}

 

// Component.vue
<template>
 <div>
  <transition
    mode="out-in"
    v-bind:css="false"
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
  >
    <router-view></router-view>
  </transition>
 </div>
</template>

<script>
 import Shared from './Shared.js'

 export default {
  methods: {
   enter(el, done) {
       this.$nextTick( function() {
        Shared.svgDecoratorIn( '#targetSvg' )
    }
   }
  }
 }
</script>

Obviously this is a massively oversimplified version of it but I hope it gives you an idea.

 

I would then make small flexible animation functions that would return a new Tween or Timeline based on the given element as an input. Those can be used to create more complex timelines, be called by parent components or children components.

 

The catch, to me is making sure the desired component exists in the DOM before calling the animation functions. I'm guessing Scene1, 2 and 3 don't all get loaded/rendered on page load.

 

An alternative technique, that I just thought of, if you really must have the animation encapsulated in the component, is to save your component timeline in a variable and $emit that up to the parent component. The parent component then, would grab the timeline from the payload and push into a master timeline of its own.

 

I need to have some lunch now but will try and have a proof of concept setup when I am back... Watch this space.

  • Like 2

Share this post


Link to post
Share on other sites

Rock on man! I agree the emit approach is the way to go. Would love to see an example where timeless can be emitted to the parent... the challenge would be how can I add them to the master timeline in a specific order? 

 

Thanks for the help!

  • Like 1

Share this post


Link to post
Share on other sites

It is possible...

 

But I'm not sure I'd go this route. It feels full of little bits having to be aligned correctly and does forces whoever is working the code to really know his way around both Vue and GSAP. It really feels too flimsy and prone to breaking.

 

Then, you will have to create a store when things get more complicated and nesting deeper in order to be able to control it all. All in all an interesting challenge.

 

https://codepen.io/dipscom/pen/pajNGw/

 

I'd think there are more that can be done with Vue's transition and component system. I'm just not too hot with it yet.

  • Like 1

Share this post


Link to post
Share on other sites

All good, thank you for helping me explore this. After doing more research I realize I am just going to create the timeline in the master parent vue... and not worry about sending individual timelines up the chain. 

Share this post


Link to post
Share on other sites

I'd say that's a wise decision.

  • Like 1

Share this post


Link to post
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.