cotton Posted August 25, 2022 Share Posted August 25, 2022 Hello Kind of following on from this thread, I'm getting an error where a section lower down the DOM is being triggered at the very top, on page load. To explain, I've got sections on a page which have colour attributes which are then used to change the background colour of the wrapping parent element as they are triggered. There is also a horizontal slider that does the same as each slide comes into view. However, on page load the first slide (orange), which is the 4th section down here, updates the wrapper background colour instead of the first DOM section. Is it because it's a pinned element so it triggers the onEnter when the page loads and if so, can I delay that or something? The first section works as expected when scrolling back up the page. If it makes any odds the final site will be dynamic/flexible/CMS so needs to work wherever it may be placed on the page. Thanks See the Pen QWmRGmX by Cottonltd (@Cottonltd) on CodePen Link to comment Share on other sites More sharing options...
cotton Posted August 26, 2022 Author Share Posted August 26, 2022 I managed to fix it. I put the individual slides ScrollTrigger call inside the onEnter callback of the horizontal wrapper so it only fires once the slider wrapper is in the viewport. See the Pen abYraKg?editors=1010 by Cottonltd (@Cottonltd) on CodePen Not completely sure what the problem was however, must be something to do with the horizontal-ness and pinning? Link to comment Share on other sites More sharing options...
Cassie Posted August 26, 2022 Share Posted August 26, 2022 I haven't managed to dig through properly but it sounds like a common issue people stumble on. The first horizontal 'containerAnimation' scrolltrigger will fire on page load as the logic is 'fire when this section is in ... position on the x axis' - which it is already on page load. If you only want it to fire when it's in position on the y axis then you'll need to use a normal scrollTrigger for that. Glad you got it sorted though! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now