jonkwheeler / ScrollScene

ScrollScene is an extra layer on top of ScrollMagic as well as using IntersectionObserver to achieve similar effects.
https://scrollscene.jonkwheeler.now.sh/
MIT License
136 stars 9 forks source link

Triggers not working, seem to be fixed to the window #17

Closed packytagliaferro closed 4 years ago

packytagliaferro commented 4 years ago

I am just trying to make a simple animation to test this out but the trigger never happens. The log shows scroll events but the indicators seem to be fixed. When I scroll the "trigger" indicators is always in the middle of the screen and the "start 1" is always 50px from the top. Both element and trigger when I console.log them out show the correct element but scrollScene doesnt seem to be acutally using those elements.

My JS

import {
    ScrollScene
} from 'scrollscene'

const element = document.querySelector('#js-location')
const trigger = document.querySelector('#events')

const scrollScene = new ScrollScene({
    controller: {
        addIndicators: true,
        loglevel: 3
    },
    triggerElement: trigger,
    toggle: {
        element: element,
        className: 'bg-red',
    },
    offset: 100,
    triggerHook: 0.5,
})

I get no errors.

I am using Laravel 7 and that whole site is wrapped around a div with id #app for using Vue, but I am not using a Vue file to implement this, just my main js file

In the video the "Whats going on" main div would be the trigger and the list of events would be the element

Screen Recording 2020-03-08 at 11.15.27 AM.zip

jonkwheeler commented 4 years ago

Hmm. There's def something wrong with the trigger element. It shouldn't be fixed like that. What's the css of #js-location and #events look like?

packytagliaferro commented 4 years ago

I use Tailwind.css

<section id="events" class="bg-carbon-900 pb-32 pt-64" style="margin-top: -6rem;">

<div id="js-location" class="flex flex-col md:flex-row -mx-4 mt-16 px-4 md:mx-0">

But basic flex, padding and margin. Nothing crazy

jonkwheeler commented 4 years ago

Is it a fixed element or absolute?

packytagliaferro commented 4 years ago

just flex, padding and margin. Nothing is fixed or absolute. The classes are all Tailwind.css classes, but you can kind of get whats going on even if you have never used Tailwind

jonkwheeler commented 4 years ago

Can you paste the compiled css from both? Just to be sure...

jonkwheeler commented 4 years ago

Can you try the following?

const scrollScene = new ScrollScene({
    controller: {
        loglevel: 3
    },
    triggerElement: trigger,
    toggle: {
        element: element,
        className: 'bg-red',
    },
    offset: 100,
    triggerHook: 0.5,
})

scrollScene.Scene.addIndicators({ name: 'pin scene', colorEnd: '#FFFFFF' })
jonkwheeler commented 4 years ago

I just added an example using the above code ^^ here: https://scrollscene.jonkwheeler.now.sh/?path=/story/scrollscene-toggle-classname--offset-100-triggerhook-0-5

Code: https://github.com/jonkwheeler/ScrollScene/blob/master/src/stories/story.js#L219

packytagliaferro commented 4 years ago

Sorry, I was out of the office. So here is the complied css:

events

element.style {
    margin-top: -6rem;
}
.pt-64 {
    padding-top: 16rem;
}
.pb-32 {
    padding-bottom: 8rem;
}
.bg-carbon-900 {
    background-color: #1d1f20;
}
*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e2e8f0;
}
user agent stylesheet
section {
    display: block;
}

js-location

@media (min-width: 768px)
.md\:mx-0 {
    margin-left: 0;
    margin-right: 0;
}
@media (min-width: 768px)
.md\:flex-row {
    flex-direction: row;
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.mt-16 {
    margin-top: 4rem;
}
.-mx-4 {
    margin-left: -1rem;
    margin-right: -1rem;
}
.flex-col {
    flex-direction: column;
}
.flex {
    display: flex;
}
*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
}

I changed my code to what you had and still the trigger and element are fixed to the window. Does the body or container need some css? Like make sure both are relative?

packytagliaferro commented 4 years ago

So I can get it to work if I place those elements outside of my main container of <div id="app></div>. Is this because the main div is part of Vue? The basic setup is

const app = new Vue({
    el: '#app'
});
packytagliaferro commented 4 years ago

I got it fixed. I had to make sure the ScrollScene code was loaded after

const app = new Vue({
    el: '#app'
});

I had it in the very beginning.

jonkwheeler commented 4 years ago

Ahh, this is a case of the app / component not being mounted first. If you see my examples of how to do this in React, you should always wait for the component to mount first, before running any scripts. Happy you got it working! 🎉

React example: https://github.com/jonkwheeler/ScrollScene#using-react

^^ Obviously Vue.js has similar lifecycles you can use to do the same thing.