[Importing Plugins in Nuxt.js]

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.

[Smooth Page Scroll]

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.

[Smooth Page Scroll]

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

 

[Smooth Page Scroll]

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?

[Smooth Page Scroll]

On 10/31/2017 at 2:37 AM, OSUblake said:

Blake, I don't mean to sound ignorant (it may be too late), but where is SmoothScroll defined?

 

 

And then create a smooth scroll instance.

var scroller = new SmoothScroll({
  target: document.querySelector("#scroll-container"), // element container to scroll
  scrollEase: 0.1, // scroll speed
  maxOffset: 500
});

 

-mark

***** NM Found It! ****

 

 

 

 

 

[Scrollmagic parallax + sidebar navigation]

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.

[Parallax with GSAP and ScrollMagic]

DevSaver,

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

 

mark