Jump to content
Search Community

scrolltrigger with smooth scrolling and Locomotive

_youri test
Moderator Tag

Recommended Posts

Hi,
For my website I'm trying to use the code from snorkl.tv in order to have a smooth scroll : https://www.snorkl.tv/scrolltrigger-smooth-scroll/
I've created the div with a class="scrollContainer" and used the proxy method but I'm stucked. Because my timeline is broken. Here is a Pen of my code.
Where am I wrong ? You should open the pen in a new window as my div have width bigger that the display in Pen !

See the Pen LYZxZPW by _youri (@_youri) on CodePen

Link to comment
Share on other sites

 

You are missing a '/' on one commented out part in the js

That throws an error in the console - you can see it, when you open up dev-tools in debug-view

 

/ each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll.

 

That breaks everything.

 

Sidenote:

In your CSS there is also one part, that is not commented out the way it should be

 

<!-- transform: scaleY(-1); -->

 

 

 

Edit:

Woof, that sort of sounds a bit sour, always starting with 'You...'.

Sorry, if that comes across a bit rough - not intended :) 

 

 

  • Like 2
Link to comment
Share on other sites

 

That is related to how you set things up.

 

If you want the animation to be triggered earlier, change the start, maybe to 'top bottom' - when the top of the section hits the bottom of the window.

 

If you want your animations to animate quicker, change the duration on the tweens.

 

Here's an example

 

See the Pen 30eb64f4de6919ff95bb5e195830c7ee by akapowl (@akapowl) on CodePen

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

@_youri

 

Alright, now I see the problem.

Sorry, I missed it before, because codepen is sort of slow for me today and the loco-scroll wasn't even active when I tested.

 

Seems, you need to set your body's overflow to hidden, for things to work properly.

 

Also, I added

 

scroller: '.scrollContent'

 

to your ScrollTriggers, so they know where the scrolling is being worked on.

 

 

See the Pen 6c9f37d82b2c94f7a8e4ed0d763a66cb by akapowl (@akapowl) on CodePen

 

 

Does this resolve your issues?

 

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