msymms

This is the same solution that I had to use. The below is placed in my local index.vue file. It does not work (at least for me) when placed in the nuxt.config.js head() { return { script: [ { src: 'gsap/TweenMax.min.js' }, { src: 'gsap/TweenLite.min.js' }, { src: 'gsap/TimelineLite.min.js' }, { src: 'gsap/TimelineMax.min.js' }, { src: 'gsap/SplitText.min.js' }, { src: 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js' }, { src: 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js' }, { src: 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/plugins/ScrollToPlugin.min.js' }, { src: 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js' } ] } } NOTE: SplitText.js threw an "Unexpected Token {" error. I had to use the .min version and had no problems. All greensock files are located in a subfolder 'gsap' inside of the 'static' folder.

So I have gone through the bulk of Keith's videos. Quite enlightening. Things look a little more familiar. I have been able to start the parallax scrolling at the bottom of the screen. But I am still trying to figure out the logic. For instance, what does this value (dt) represent? let dt = 1 - Math.pow(1 - _this.scrollEase, deltaTime); and what is the need for an endThreshold? this.endThreshold = 0.03; Sorry if this is basic stuff, I am just getting back into this after a number of years away.

Let me check that post out. I'll circle back

Blake, so I have dug into the smoothScroll.js file. I am trying to understand the logic and what exactly you are doing. There are some behaviors I would like to modify and really just understand what is going on. You have incorporated a parallax feel which I want to capitalize on as well. Are you able to answer questions about the code? I don't understand what is happening in this for-loop prior to setting the transform style. for (let i = 0; i < _this.scrollItems.length; i++) { let item = _this.scrollItems[i]; let distance = scrollOrigin - item.top; let offsetRatio = distance / _this.maxDistance; item.endOffset = Math.round(_this.maxOffset * item.depthRatio * offsetRatio); if (Math.abs(item.endOffset - item.currentOffset < _this.endThreshold)) { item.currentOffset = item.endOffset; } else { // item.currentOffset += (item.endOffset - item.currentOffset) * this.scrollEase; item.currentOffset += (item.endOffset - item.currentOffset) * dt; } item.target.style.transform = "translate3d(0px,-" + item.currentOffset + "px,0px)"; } Can you help?

So I am late to the party... Shaun, Did you have to use ScrollMagic in the latest pen. This presentation will work great for my current project, I think. If I can sell the customer.

DevSaver, Did you ever arrive at a solution to this? I would be most interested. mark