Jump to content
Search Community

vue + aframe + gsap + scrolltrigger + pin problem

321dev test
Moderator Tag

Recommended Posts

Hi all,

 

i'm experimenting with the combination vue + aframe + gsap + scrolltrigger. I built a small demo that rotates a cube based on the scroll position. This works fine.

 

But when i set pin=true, somehow the a-frame scene gets messed up (several objects get copied and multiplied). The two added screenshots show the "bad" and the "good" version of the object structure. (Unfortunately they are directly on top of each other, so they appear as one. Each image starts with <div class="spacer")

 

I have no idea what's going on, or what 'pin' does in the background.

 

Does anyone have an explanation (and possibly a solution) for this?


Thanks.

 

<template>
  <div id="app">
    <div class="spacer" />
 
    <div id="scenewrapper">
      <a-scene embedded vr-mode-ui="enabled: false">
        <a-box position="0 0.5 -3" :rotation="`0 ${360 * progress} 0`" color="#4CC3D9"></a-box>
        <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
        <a-sky color="#ECECEC"></a-sky>
      </a-scene>
    </div>
 
    <div class="spacer" />
  </div>
</template>
 
<script>
import Vue from 'vue'
import aframe from 'aframe'
 
import { gsap } from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger"
 
Vue.config.ignoredElements = [
  'a-scene',
  'a-assets',
  'a-asset-item',
  'a-sky',
  'a-camera',
  'a-cursor',
  'a-animation',
  'a-entity',
  'a-box',
  'a-sphere',
  'a-cylinder',
  'a-plane',
  'a-gltf-model',
]
 
export default {
  name: 'App',
 
  data () {
    return {
      progress: 0
    }
  },
 
  mounted () {
    let _this = this
    gsap.registerPlugin(ScrollTrigger);
 
    let triggerConfig = {
      trigger: '#scenewrapper',
      start: 'top center',
      end: 'bottom center',
      pin: false,
      markers: true,
      onToggle: self => console.log("toggled, isActive:", self.isActive),
      onUpdate: self => {
        _this.progress = self.progress
        // console.log("progress:", _this.name, self.progress.toFixed(3), "direction:", self.direction, "velocity", self.getVelocity());
      }
    }
 
    ScrollTrigger.create(triggerConfig);
  },
}
</script>
 
<style lang="scss">
#app {
  font-family: Avenir, HelveticaArialsans-serif;
  -webkit-font-smoothingantialiased;
  -moz-osx-font-smoothinggrayscale;
  color#2c3e50;
  margin-top10px;
}
 
#scenewrapper {
  width600px;
  height600px;
 
.spacer {
  background-color#888;
  width100vw;
  height1000px;
}
</style>

 

 

vue-aframe-gsap-bad (pin true).png

vue-aframe-gsap-good (pin false).png

Link to comment
Share on other sites

10 hours ago, 321dev said:

I have no idea what's going on, or what 'pin' does in the background.

I'd highly recommend checking out the docs where there's a full explanation: 

https://greensock.com/docs/v3/Plugins/ScrollTrigger#pinning

 

I'm totally unfamiliar with aframe and Vue, so I'm not sure I can be of much assistance. If you still need help, please create a minimal demo with only the most basic code and post it here so we can see things in context like in a CodePen or CodeSandbox. 

 

Happy tweening!

  • Like 1
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...