Closed packytagliaferro closed 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?
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
Is it a fixed element or absolute?
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
Can you paste the compiled css from both? Just to be sure...
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' })
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
Sorry, I was out of the office. So here is the complied css:
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;
}
@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
?
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'
});
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.
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.
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
andtrigger
when I console.log them out show the correct element butscrollScene
doesnt seem to be acutally using those elements.My JS
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