Smooth is a small JavaScript module based on VirtualScroll to create smooth scrolling and parallax effects on scroll. It works both with fake scrollbars and native scrolling.
npm install smooth-scrolling
import Smooth from 'smooth-scrolling'
const section = document.querySelector('.vs-section')
const smooth = new Smooth({
native: true,
section: section,
ease: 0.1
})
smooth.init()
listener
: on-scroll events listener & parent container for all elementsdirection
: vertical or horizontal scrolling behaviornative
: use the default scrollbarsection
: the element to transformease
: the easing value (usually between 0 and 1)vs
: you can pass some option for virtuall-scroll: limitInertia, mouseMultiplier, etcpreload
: if set to false, there will be no resize function called after all images loadednoscrollbar
: if using virtual-scroll and set to true, it will not build a custom scrollbarcallback
: function called on requestAnimationFrame
Will add all event listeners and DOM elements.
Will listen to either window scroll event (if native), otherwise VirtualScroll
Will stop listening to onscroll/wheel events.
Will remove all event listeners and DOM elements.
Basic scrollTo function.
import Smooth from 'smooth-scrolling'
class Custom extends Smooth {
constructor(opt = {}) {
super(opt)
this.dom.section = opt.section
this.dom.opacity = opt.opacity
}
run() {
super.run()
const current = Math.round(Math.abs(this.vars.current))
const opacity = Math.max(0, Math.min(1 - current / (this.vars.height * .5), 1))
this.dom.opacity.style.opacity = opacity.toFixed(2)
this.dom.section.style[this.prefix] = this.getTransform(-this.vars.current.toFixed(2))
}
resize() {
this.vars.bounding = this.dom.section.getBoundingClientRect().height - this.vars.height
super.resize()
}
}
export default Custom
// ...and later on
import Custom from './custom-smooth-scrolling'
const section = document.querySelector('.vs-section')
const opacity = document.querySelector('.vs-opacity')
const smooth = new Custom({
section: section,
opacity: opacity,
ease: 0.1
})
smooth.init()
git clone [email protected]:baptistebriel/smooth-scrolling.git
cd smooth-scrolling/ && npm i && npm run dev
You can use [http-server](https://www.npmjs.com/package/http-server)
or MAMP to preview the demos.
npm run demo-parallax
npm run demo-parallax-page
npm run demo-horizontal
npm run demo-native-horizontal
npm run demo-opacity
npm run demo-scale
npm run demo-split
npm run demo-performances
- etq.store
- femmefatale.paris
- buildin.amsterdam
- romainpsd.com
- flavinsky.com
- alisharaf.com
- bbriel.me
- studiochevojon.com
- andeinerseite.video
- eginstill.com
- blackballoon.fr
- & more to come!
If you didn't already read the tutorial, I highly recommend it. Smooth.js is basically what's explained on the blog post. I just needed a simple script to get things done without having to write lots of code every time I wanted to use this technique.
MIT, see LICENSE.md.
smooth-scrolling's People
Forkers
yoshuawuyts luruke antoninlanglade moulteprod ferdydurque madebyae jdacosta kolinw shapilokk vemulvamsy pragmatismx addmaya hellopath dhmax88 jclappiway petercarsater jackismissing triggo-b philipyoungg oion supahfunk manudurgoni ventinus duezerouno mpalpha p-pousin andylucky techhahn ivansotelo knan71 bwest8385 hoanganhover togoog dimakrivenko janholtman jamiemorganward polyclick jimovi24 xavierfoucrier gouterman tristantbg samangrigon peterlyshak nmedias rileydadair gaven egidiofrat weotch siamak duc-dev brlamco gsmartagence alvazz kangtae yurayarosh auriga-z etokub daagda maxlestage junon-shop sbtly tchref guisopo muoivy jurumy78 agni-saha bhargavborse hatimsaif52 taiwooluwasegun jgthmssmooth-scrolling's Issues
Scrolling section responsive
Hi,
I am currently working on a site to reproduce "one page scroll section".
It works pretty well on desktop. But in mobile (chrome), I can not remove the pull-to-refresh.
I try to reproduce something like this : https://www.humble.tv (pull-to-refresh effect disable).
I try some css "hack" but it doesn't work.
Would anyone have an idea to reproduce that ?
Thank's
Suggestion for useful methods
Hi there!
There could be some useful methods that could be implemented in my opinion:
.lock() and .unlock()
To temporary lock the scroll
.setPosition()
Set a scroll position without having the tweening
What about adding a simple event-system/dispatcher?
Could be useful to subscribe to events (scroll, resize...)
I was able to implement those thing easily, just extending the class.
Not sure but to me they look quite handful / generic, what do you think?
safari trackpad jitter
hi,
When on safari using a trackpad i get a very jittery jumpy scroll animation.
I assume this has to do with inertia.
i've set it up like this
smooth = new Smooth({
native: true,
section: section,
ease: 0.1,
vs: {
limitInertia: true
}
});
should be correct right?
but it does not fix the problem. Am I doing something wrong, or is this a known bug? can anyone replicate this?
How to call the original VirtualScroll .on()
I've tried with smooth.on() but it doesn't seem to work the same way it does in the original lib.
Thanks
better css controls with native true/false
I think it would be good to add a is-native
/ is-virtualscroll
class on the body at the initialisation of smooth-scrolling.
This way we can have more control on the CSS applied on each case (i.e virtual-scroll needs overflow: hidden;
on body, while native scrolling doesn't)
scrollTo with scroll disabled
Hello,
First of all, THANK YOU for this librairy, it is so fun to play with it and we can do such beautiful things !
Here is my problem :
- I would like to move my section on mouseY position, i'm using the scrollTo method on throttle mousemove event. It works fine.
- I would like to disable the mousewheel (the usual scrolling behaviour) and only move the section with my mousemove thing.
How can i do that ? When I turn off smooth (smooth.off), the scrollTo method doesn't work anymore.
An other problem (related but maybe an other issue) :
Is it possible to have different behaviour on my mousemove thing and the usual scroll.
For example, I would like a different ease value for the scrollTo method than the usual scroll.
Thank you again and sorry for the disturbance.
Mourtaza.
Possible to have another smooth applied to a div?
Is it possible to have another smooth applied to a div? One pretty big use-case is a cart modal or menu and so forth.
When I initialize two different smooth objects it just adds another .vs-scroll-view to the body...
Scroll with fetch
Hi!
I want to add elements through the fetch and add class or animation for elements on scroll, when they reach viewport? I can't runing example.
I run, for example:
npm run demo-parallax-page
and i get:
> [email protected] demo-parallax-page E:\web-development\smooth\smooth-scrolling
> watchify -v -t babelify demos/parallax-page/index.js -o demos/parallax-page/build.js
48493 bytes written to demos/parallax-page/build.js (2.52 seconds) at 00:18:29
Section scrolling
Hi! Im new in js. Tell me please, how to make snap scrolling in your script? It most be easy.
Use native touch scrolling?
Hey Baptiste,
Is there a simple way to use the native scroll smoothing on touch devices?
What I mean is (for example); the native iOS Safari scrolling is natively smooth and responsive, but with smooth-scrolling, it's either slow, or at least different enough to feel a bit "off". I want to keep smooth-scrolling enabled for the parallax and so forth, but not the overall scrolling movement.
Would setting ease
to 0
and vs: { preventTouch: true }
or some similar setting combination suffice?
Scroll based interactions
hey there.
i really love your plugin. and it works perfectly on my website. the only thing is.. my scroll based interactions don't work anymore now. i guess it's because of the fixed wrapper as the elements don't really scroll into view anymore. how can i achieve this?
please help. and thank you so much.
Smooth Scroll inits fine, but content isn't scrollable.
Is there issues running the script together with lazysizes and packery, for example? For some reason, scrolling doesn't work for me, and the helper-div that sets the scroll height based on the getBoundingClientRect
is at height: 0;
...
I've tried initializing before and after load is complete and preload
both true
and false
. So not sure what's happening with the init, as it generates all the classes and so forth.
It also seems to happen without packery and lazysizes, could it be that I have some elements sized with vh
and vw
?
Drawing a blank here, and not very good with JS. :/
Cheers!
use IntersectionObserver (if available) for in-viewport changes
Horizontal Scrolling inside native vertical
Is it possibile to put a div with horizontal smooth scrolling inside a vertical scrolling (native, possibly), but using the deltaY instead of deltaX property? When the div or whatever is in position 0 and the user scroll to go back to the top, the page scroll in native direction; otherwise, (if position mouse direction is down or is top but position is > 0), the user scroll inside horizontal virtual scrolling.
webpack issue
Hi,
Thank's for this magic module.
I am encountering a problem when I extend Smooth on a webpack project.
If I use it directly, it works. If I extend the class, I have the following error in the console :
Class constructor Smooth cannot be invoked without 'new'
Here is my code
import Parallax from './plugins/parallax';
const main = document.querySelector('#main');
const parallax = new Parallax({
native: true,
section: section,
ease: 0.1
})
and the begining of the parallax class
import Smooth from 'smooth-scrolling';
import {
TweenMax,
TimelineMax
} from 'gsap';
class Parallax extends Smooth {
constructor(opt) {
...
}
}
export default Parallax;
For informations, I use version 2.3.7 with webpack on a vuejs/laravel project with https://github.com/vuejs/laravel-elixir-vue-2
Thank's
Error when building
I'm getting this error when trying to build the latest version (using Parcel);
/Users/a/Sites/dev/templates/app/node_modules/smooth-scrolling/node_modules/dom-classes/index.js:5:20: Cannot resolve dependency 'indexof'
3 | */
4 |
> 5 | var index = require('indexof');
| ^
6 |
7 | /**
8 | * Whitespace regexp.
Disable Space Bar?
Hi,
We have smooth-scrolling enable and whenever you press space bar the page scrolls down the height of the viewport. How do you stop this behaviour?
Hiding the scroll thumb when content doesn't extend beyond viewport.
Is there a way to hide the scrollbar/thumb when the content/scroll-helper-div doesn't expand beyond the viewport (non-native of course)?
I feel really thick asking all these questions, which probably shouldn't be posted as issues on Github. Sorry! :)
Importing issue via webpack
Hello,
Super smashing module. Top work
However, I do have an issue
import Smooth from 'smooth-scrolling'
const section = document.querySelector('.test')
const smooth = new Smooth({
native: true,
section: section,
ease: 0.1
})
Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
Which points to this line:
module.exports = window.Smooth = Smooth
in index.js
If I import the compiled script import Smooth from '../../node_modules/smooth-scrolling/smooth-scrolling.js'
I get a different webpack error
__WEBPACK_IMPORTED_MODULE_6__node_modules_smooth_scrolling_smooth_scrolling_js___default.a is not a constructor
Any thoughts
I'm using webpack version 2.
note. I also had this issue when I was using rollup to build my scripts
Cannot use Smooth without module loader?
I typically write in vanilla ES2015 JavaScript without using Browserify or Webpack, and as such I can't seem to load Smooth. Simply including the minified Javascript on the page does not actually attach Smooth to the window, leading to Uncaught ReferenceError: Smooth is not defined
any time I try to use Smooth.
I assume it's an issue somewhere with either Line 1 or Line 346, but I'm not terribly familiar with the different module systems.
Uncaught TypeError: Class constructor Smooth cannot be invoked without 'new'
Hi, nice smooth-scroll, really love it, but when I try to extends Parallax with smooth-scroll I've got this message, I don't really know why... but I think it's something with my webpack? or something,,
The error
Uncaught TypeError: Class constructor Smooth cannot be invoked without 'new'
var Parallax = function (_Smooth) {
_inherits(Parallax, _Smooth);
function Parallax(opt) {
_classCallCheck(this, Parallax);
<!----- This line --->
var _this = _possibleConstructorReturn(this, (Parallax.__proto__ || Object.getPrototypeOf(Parallax)).call(this, opt));
<!--- end of line --->
_this.createExtraBound();
_this.resizing = false;
_this.cache = null;
_this.dom.divs = Array.prototype.slice.call(opt.divs, 0);
return _this;
}
...
}
My webpack.config
'use strict';
const path = require('path');
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const SvgStore = require('webpack-svgstore-plugin');
require("babel-polyfill");
module.exports = {
cache: false,
context: path.resolve(__dirname, "src"),
entry: {
app: [
"babel-polyfill", "./js/app.js"
],
},
output: {
filename: "[name].bundle.js",
},
resolve: {
alias: {
"TweenLite": path.resolve(__dirname, 'node_modules', 'gsap/src/uncompressed/TweenLite.js'),
"TweenMax": path.resolve(__dirname, 'node_modules', 'gsap/src/uncompressed/TweenMax.js'),
"TimelineLite": path.resolve(__dirname, 'node_modules', 'gsap/src/uncompressed/TimelineLite.js'),
"TimelineMax": path.resolve(__dirname, 'node_modules', 'gsap/src/uncompressed/TimelineMax.js'),
"ScrollMagic": path.resolve(__dirname, 'node_modules', 'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'),
"animation.gsap": path.resolve(__dirname, 'node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js')
}
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules\/(?!(dom7)\/).*/,
use: [
{
loader: "babel-loader",
options: {
presets: ["es2015"]
}
}
],
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
{
loader: 'sass-loader'
}
],
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=1000&name=[name]-[hash].[ext]'
}
],
},
externals: {
'TweenMax': 'TweenMax'
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].bundle.css"
}),
new SvgStore({
// svgo options
svgoOptions: {
plugins: [
{ removeTitle: true }
]
}
})
],
};
How do i solve it?
StickySidebar with Smooth-Scroll
Hi, I'm trying to build an StickySidebar, I realised that it's not possible to set position:fixed with smooth-scroll, so I have to transform-count the scroll position,
I want something like this. https://github.com/WeCodePixels/theia-sticky-sidebar
Can someone help me out with a stickysidebar that's work smooth together with smooth-scrolling.
My code right now..
class StickySidebar {
constructor( opts = {} ) {
this.bind()
this.dom = {
el: document.querySelector('[data-sticky]'),
content: document.querySelector('.o-content'),
sidebarInner: document.querySelector('.o-sidebar__inner')
}
this.bounding = this.dom.content.getBoundingClientRect()
this.sticky = false
this.init()
}
bind() {
['run']
.forEach((fn) => this[fn] = this[fn].bind(this))
}
run() {
const current = window.scrollY
const transform = current - (this.bounding.top - 200)
const bottom = this.bounding.bottom - (this.dom.sidebarInner.offsetHeight + 300)
const top = this.bounding.top - 200
if ( current > top && current < bottom ) {
this.dom.el.style.transform = `translate3d(0, ${transform}px, 0.1px)`
this.dom.el.classList.add('is-sticky')
this.sticky = true
} else {
this.dom.el.classList.remove('is-sticky')
this.sticky = false
}
}
addEvents() {
TweenMax.ticker.addEventListener('tick', this.run, this)
}
init() {
this.addEvents()
}
}
webpack issue?
Hi,
I am trying to initialise the plugin but I'm getting a module loader error. I'm kind of new to Webpack, do you know how how to fix this error?
.min not working, uglify breaks script
hi baptiste,
i noticed uglify seems to break the script. I'm not sure whether it's a uglify setup problem or some declarations within the script.
Currently I'm using gulp with webpack and babel.
Neither Uglify nor babili are working, as soon as I output minified js it seems to calculate a height of 0.
also including the min version right away doesnt work. I gave up on trying to import/require it, that just gave me a bunch of errors I'M not advanced enough to understand.
preload: true will block scrolling until everything is loaded
If you have preload: true
in the options, smooth-scrolling will querySelectorAll
image elements inside the container to preload them and then call the resize
function when the last one is loaded.
If you have lots of images, smooth-scrolling will not respond before those images are being loaded.
A solution for this is to call resize
at the very beginning of init AND as soon as all images are loaded. This way we're sure that the user will be able to start scrolling from the beginning, but the function will be called twice; one time on init and a second one when all images are loaded. Not very good as we're doing quite a lot of getBoundingClientRect()
calls for every element you want to apply transform.
If you don't want to use preload: true
because of this issue, you can use the intrinsic ratio to wrap all images into containers. This way, even if the images aren't loaded your container's height will not be updated after images are loaded. But it doesn't work all the time as you'll have to define the ratio of the image in CSS.
Getting rid of native scrollbar
Hi Baptiste, I'm trying to figure out how to remove the native scrollbar. Setting the element to overflow: hidden;
doesn't cut it. Any other options? Thanks.
Parallax Sections
Hey baptistebriel,
Using your 'parallax-page' demo as a base, I'm trying to make a page with numerous sections, with parallax elements absolutely positioned, relative to the parent.
I originally changed the demo so it displayed divs instead of images and I'm experiencing some issues with the scroll container having no height on page load. But when you resize the window, it recalculates and works fine. I can fix this in a hacky way by forcing a resize in my code:
setTimeout(function(){
window.dispatchEvent(new Event('resize'));
})
Is there a more elegant way to fix this? I'm using webpack as a build tool and the strange thing is once the packages are bundled for production it works fine?!? The codesandbox example below seems to work fine too.
Also another issue I'm experiencing is elements with a positive data-speed attribute applied (data-speed="1")
to a div/img causes it to jump when visible in the viewport. You can see this on the link below, once the container with the cat image is scrolled to. Any ideas why it could be doing this?
Here is the code - https://codesandbox.io/s/4r6okr4834
Many thanks and great work π
Empty space at the bottom after resizing
How to reproduce:
- open https://pierrelevaillant.me/#!/projects with a "desktop" window size.
- scroll at the bottom.
- make the window smaller.
- notice that the height of the page has changed and now there is "empty space".
I temporary fixed forcing the calc
after resizing.
resize() {
super.resize();
this.calc({
deltaX: 0,
deltaY: 0
});
}
Would be great if it's possible to temporary disable the tweening when applying this fix.
Issue building production files with webpack. UglifyJS </3 ES6.
Hi,
When buidling production files with Webpack I get the following error:
"ERROR in static/js/1.c44247249e196963e223.js from UglifyJs
Unexpected token: name (Smooth)"
It seem to be an UglifyJS/ES6/packaging issue.
Here is a related link: https://swizec.com/blog/fun-surprise-uglifyjs-cant-es6/swizec/7272
Not using es6 or babel or require
I'm loading the script in my html
/resources/js/plugins/smooth-scrolling.min.js
In my js file i have
var section = document.querySelector(".js-slider");
var child = document.querySelector(".js-item");
var smooth = new Smooth({
preload: false,
native: false,
direction: "horizontal",
section: section,
divs: child
});
smooth.init();
But this doesn't do anything, I can see from you demos and code examples you are using es6. I'm not i'm using old javascript. how do i extend smooth to use the custom.js (as per demos) but not use es6!
i've tried bits like this
var smooth = new Smooth({
preload: false,
native: false,
direction: "horizontal",
section: section,
divs: child,
run: function() {
// do something
}
});
Thanks
detect if the instance created extends or direct instance of Smooth
Currently to extend Smooth in your own file you have to pass an option. I need to know if the instance created extends Smooth or is direct instance of Smooth.
https://github.com/baptistebriel/smooth-scrolling/blob/master/index.js#L17
I've done this so smooth-scrolling.js
could be used on its own without going into the build process.
slow scrolling on phone
Device: iPhone 5s
scrolling is very slowβto the point it feels unresponsive.
tried to change ease to 1. Now the momentum is gone. :(
Error: "Cannot read property 'run' of undefined"
I'm getting an error in this method:
Smooth.prototype.requestAnimationFrame = function requestAnimationFrame () {
this.rAF = requestAnimationFrame(this.run);
};
Error is Cannot read property 'run' of undefined
for the this.run
reference. Any reason this
would be undefined there?
Parallax start position
Hi there! Great package.
We are running SmoothScroll with parallax with preload set to true. We've got a loading screen that covers the page entirely and only fades out once all the images on the page have loaded and resize() has been called again as per #49.
The challenge we're having is that our hero image has parallax on it, and you can see it visually jump when the parallax transform gets added. Oddly, this seems to be happening several seconds after resize() has been called and the loading screen has faded out.
Is there a way to ensure a parallax element's origin on init is transform3d(0, 0, 0), and those values only increase / change once scrolling has actually begun? If not, do you have any other ideas for how to control for the initial parallax position without seeing a visual jump when parallax inits?
MAC OS native touhpad gestures
scrollTo() without native scrollbar - Cannot set property 'target' of undefined
Hello there!
in scrollTo() there is a little typo mistake
https://github.com/baptistebriel/smooth-scrolling/blob/master/index.js#L261
this.pos.target = offset
Should be
this.vars.target = offset
Cheers!
How can i extend with custom.js , index.js in demo
Hi ! First of all thanks for great plugin, i see the demos and its amazing!
But i have 2 beginner questions
-
For example in demos/opacity/ we have build.js , index.js , custom.js in index.html we use only build.js , and in build.js is already extended to work with opacity . But why we need other 2 files ?
Can i just connect smooth-scrolling.js to index.html page , and extend with custom.js and index.js? -
It is possible to use smooth scrolling + parallax ? yes sure you have demo for parallax but its works alone , without vs-section container. i very like to have result like on this demo http://www.eginstill.com/project/loft-val-thorens/ i trying almost 10 hours but not success, thats why i write you :)
I am be very happy if you help me a little
Smooth.resize() when using native gives error.
When executing Smooth.resize() while the nativeScroll
is set to true
I'm getting Uncaught TypeError: _smoothScrolling2.default.resize is not a function
not sure where _smoothScrolling2
is coming from...
Child fixed container & smooth scrolling section container
Hi. How to make child container fixed relative to window? Smooth scrolling container also is fixed.
And additionally: how to use listener?
this.smooth = new Smooth({
extends: false,
// when hide scrollbar
native: false,
// when hide scrollbar
noscrollbar: true,
section: container,
ease: 0.15,
preload: true,
listener: function(){
console.log("listen")
}
})
this.smooth.init()
- no logs
Is there an update-function?
Is there any way to update the smooth-scroll after an ajax/pjax-load? Resizing works, but not by simply loading new content within the section...
I tried destroying to the reinitialize on new page but when trying to use Smooth.destroy() I get this;
Uncaught TypeError: smooth_scrolling__WEBPACK_IMPORTED_MODULE_3__.default.destroy is not a function
at Object.<anonymous> (index.js:423)
at Object.trigger (barba.js:929)
at Object.onStateChange (barba.js:1391)
at Object.goTo (barba.js:1198)
at Object.onLinkClick (barba.js:1302)
My Footer is cut off (works after resize)
Hi,
I have a strange problem on this Site: http://www.ide.co.at/yachting/ When the page initial loads the footer gets cut off. After I resize the page the footer is shown.
This behaviour shows up with smooth scroll enabled. Any Ideas to solve this?
https://i.imgur.com/wPuPR3s.png
Regards
Override Smooth
Hi :)
I am using Smooth for an horizontal scroll, I only would like to override the calc method to change
const delta = this.vars.direction == 'horizontal' ? e.deltaX : e.deltaY
with
const delta = this.vars.direction == 'horizontal' ? e.deltaY : e.deltaX
So I did
import Smooth from 'smooth-scrolling'
class SmoothHorizontal extends Smooth {
calc(e) {
const delta = e.deltaY
this.vars.target += delta * -1
this.clampTarget()
}
}
export default SmoothHorizontal
but this doesn't work, do you have any idea ?
Thanks π
touch devices
hi,
i tried the smooth scrolling on ipad but it seems that the scrolling is a way too smooth there. what could be the reason?
thanks.
What about mobile ?
Hey baptiste !
I'm wondering about those options of VS.
touchMultiplier : I suppose it is used to crank up or slow down the amount of scrolling on touch devices but i can't find any differences even if i boost the value to unreasonnable amounts.
preventTouch : I suppose it is used to prevent the smooth scrolling to run on touch devices, but once again, it doesn't appear to make any differences.
Am i wrong about what those two options are supposed to do ? I suppose i'm not as i read in a other issue that's what they're suppose to do.
And i suppose i've passed the options the right way, but again, i might be wrong.
const smooth = new Smooth({
listener: uscroll,
native: true,
section: section,
ease: 0.05,
vs: {
touchMultiplier: 1.5,
preventTouch: false,
}
})
Merci !
Need support for Typescript
I'm not able to import Smooth class into my typescript project
import Smooth from 'smooth-scrolling'; // throwing error 'Can not find module smooth-scrolling'
Empty space after content with native: true
Hey @baptistebriel, it's me again π
I ran into another issue...
I've tried to set up my smooth scroll with native: true to enjoy the is-scrolling feature which is added to the listener when doing so. Except now, even though i'm able to scroll, it's causing my page to be way higher than it's suppose to, "adding" a large blank space after my content. If i put native back to false, there's no problem whatsoever.
My scroll section is the right size according to the inspector...
Do you know what might be causing the issue ?
Thanks (once again), hope i'm not asking to much.
You can find the example here :
https://pensive-lichterman-1038a1.netlify.com
ps : i'm using biggie to set up all this, i don't think it's related to this. But if you want to look at the home.js file, you know where to find it. π
Let me know if i'm asking to much, i'm pretty new to all this stuff, doing my best trying to figure it out on my own, but sometimes i have no clue of what might be happening, and it could simple be a misconfiguration.
cheers
Not an issue, but how does parallax work?
Hi,
Thanks for an excellent plugin. Although this is not an "issue" it would be cool for someone to clarify to me how parallax elements work?
Isn't it just setting a variable, adding a classname and giving the item a data-speed?
Horizontal Scrolling Example
Thanks for the amazing work!
I've been trying to make the horizontal scrolling work, and can't seem to do so ...
I've been trying to reproduce the effect in http://www.buildinamsterdam.com
Could you in any way provide a working example?
Thank you so much!
Smooth.scrollTo and Anchor links
I have a two-part question.
Is there a way to use scrollTo (or any other way) to simply snap to (0,0), without animation and easing? Is there also a way to use #anchorlinks to scroll to, with/without easing?
How can I add class or animation for elements on scroll
Hi, your plugin is awesome!
I am designer, which interested in js , and I have a problem)
In other project I use for this onScreen.js plugin, but it doesn't work. How can I add class or animation for elements on scroll, when they reach viewport?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.