321dev Posted November 25, 2020 Share Posted November 25, 2020 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, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; margin-top: 10px; } #scenewrapper { width: 600px; height: 600px; } .spacer { background-color: #888; width: 100vw; height: 1000px; } </style> Link to comment Share on other sites More sharing options...
GreenSock Posted November 25, 2020 Share Posted November 25, 2020 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now