search

electerious / basicScroll

Standalone parallax scrolling for mobile and desktop with CSS variables.
https://basicscroll.electerious.com
MIT License
3.63k stars 148 forks source link

Not working in an Ionic3 project #22

Closed elmartino closed 6 years ago

elmartino commented 6 years ago

Hi, I've tried to run this in an Ionic3 project.

import * as basicScroll from 'basicscroll'

and added this code to ionViewDidLoad: ` const instance = basicScroll.create({ elem: document.querySelector('.box'), from: 'top-top', to: 'bottom-bottom', direct: true, props: { '--r': { from: '0', to: '1turn' }, '--tx': { from: '-100px', to: '100px' } } })

instance.start(); ` added a .box div with the css, but the item is not moving when scrolling. Any ideas?

Thanks in advance!

Regards, Martin

electerious commented 6 years ago

I guess what you want is

from: 'top-bottom',
to: 'bottom-top',

The animation should start when the top of the element is at the bottom of the viewport. And it should end when the bottom of the element is at the top of the viewport.

If it's still not animating: Check if basicScroll applies --r and --tx to the element. You can see it by selecting the element in the inspector and checking the inline-styles of it.

elmartino commented 6 years ago

It is not working. I noticed that it is not working when inside ion-content. If i place it outside of ion-content it is working...

electerious commented 6 years ago

That's because you aren't scrolling the body when inside a container. basicScroll currently doesn't work with containers: https://github.com/electerious/basicScroll/issues/10