Jump to content
Search Community

Horizontal scroll section elements firing on pageload

cotton test
Moderator Tag

Recommended Posts

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

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

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!

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...