Help with ScrollTrigger Smooth scroll + Vue JS (Gridsome)

[Shahas Nizar]

Hi Everybody! I would like to share my problem.

I am using ScrollTrigger to smoothscroll and animate elements.
Earlier i used Locomotive Scroll + ScrollTrigger together but when i knew that ScrollTrigger alone can do both, i decided to ditch Locomotive Scroll.

I followed the following pen for using ScrollTrigger for smooth scroll.

 

See the Pen PoZLpbp by ihatetomatoes (@ihatetomatoes) on CodePen

 

This scripts working fine with normal projects but unfortunately, when i used it with vue JS the scrolling is not working like the above one. 

I don't know how to fix this problem as i'm a beginner

 

Can anyone please give me a solution

See the Pen poPzvrP by shahas-nizar (@shahas-nizar) on CodePen

[OSUblake]

Hi Shahas!

 

You need to adapt your Vue example to match the original one. It doesn't have the same the HTML structure so you need to fix that first. In your Vue demo, the #app element would be the #viewport element. And your setupLinks function is calling stuff that doesn't exists. You need to try to understand what that function does as it wasn't meant to be a copied and pasted like that.