en en en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en ms en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en sv en en en en en en en en en en en en en en en en en en en en ms en en de en nl en fr en pl en en en en en it en en en de en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
The markers seem to be in the correct place so I'm not sure why this would be triggering on load. Is it something to do with using vars and setProperty rather than just inline hex, the ```site_wrapper.style.backgroundColor = color;``` seems to work fine and when scrolling backwards all is ok (but that is probably because the onLeave etc has been set specifically)?
See the Pen wvyJOeQ by Cottonltd (@Cottonltd) on CodePen
Hi @cotton. That's a lot of code to parse through in the demo. Are you saying that one of the onEnter callbacks is getting triggered when you don't think it should? Can you be a little more specific please?
Sorry @GreenSock, kitchen sink demo as I wasn't sure which element may be causing issues.
I've reduced it down to core now and the onEnters that may be the issue.
I think I've narrowed it down to the following that seems to be triggering too early (line 93 in codepen):
Its just the css vars that appear to be a problem, the secondary colour change early too but the background-color inline style is fine. Perhaps it's not GSAP at all...
It could well just be the containerAnimation problem, when you say 'pushed to the end' should I just call it at the end of the scripts or rearrange the DOM?
It looks like your element is initially off the page to the left, thus it's getting triggered. You can add this console.log() in your loop to see what I mean:
console.log(i, "starts at", sct.getBoundingClientRect().left);
Share on other sites
cotton    10 Likes (Newbie)
Thanks, I see my demo was not on point.
It certainly is off at the start in there, on the full site it starts at zero.
I've forked the demo to include a left margin on the slides so the start point is inside the viewport and included a log of where the carousel container begins (0):
See the Pen xxYdbaJ by Cottonltd (@Cottonltd) on CodePen
On my local site, with the markers on the 'vertical position' ones show at first load (see screenshot attached), but then disappear to the horizontal section as soon as you begin scrolling and then reappear in place on the horizontal section. Feels like it's loading that carousel section first before the rest of the triggers are applied?
Share on other sites
GreenSock    17,227 Likes (Superhero)
But what matters is the trigger element - I'm still seeing this in the console.log():
0 'starts at' -292.6700134277344
See what I mean?
Share on other sites
cotton    10 Likes (Newbie)
Yeah I see it and thought I'd fixed it on the fork but actually hadn't.
More speed, less haste required!
I've spent a bit more time on it and the above fork now acts more like the full site.
The log shows at 0 and the start marker shows at load, as well as the incorrect colour var, and disappears on initial scroll.
I hope this makes more sense and apologies for going round in circles!
Share on other sites
GreenSock    17,227 Likes (Superhero)
I'm still not totally following - you've got its left side at 0, but your start position is set to "left center" which means ScrollTrigger is doing exactly what it should by firing that onEnter. In other words, when the page loads, that element is already PAST the start position. See what I mean?
I'm struggling a bit to understand exactly what you're asking here. Could you clarify? It'd definitely help if you simplified the demo so we don't have to weed through hundreds of lines of HTML/CSS/JS. Usually just a few colored   elements is ideal.
Share on other sites
cotton    10 Likes (Newbie)
I think/hope I've diluted this enough now and apologies again for making it more confusing than it ought to be.
See the Pen YzeVaPp by Cottonltd (@Cottonltd) on CodePen
What I'm trying to do is to change the colour of the .global_block and background colour as sections scroll into view. This will be affected by both vertical and horizontal scrolling sections. However, as you noted, the first of the horizontal sections is already in view (i.e. has past 'left center') then it is triggering the colour change on page load (the block should be black on load).
I have three triggers working here:
1. The one that pins the horizontal section at 'top top'
2. one that changes the background colour (using a function that grabs the first and last slide colour attributes) as (1) reaches 'top center' and leaves at 'bottom center' — this has been removed for now to simplify the pen.
3. one that changes the colours as each slide section reaches 'left center'
So I guess my questions would now be:
– Can I make the first slide section start at 'left left' while the rest start at 'left center'
– Can I ignore the first and last slides of the horizontal section and use trigger (2) to update the colours onEnter and onLeave using another colour grab function
– Can I make the horizontal slides only trigger when that section comes into view rather than on page load?
– Any other options available
Share on other sites
GreenSock    17,227 Likes (Superhero)
Much easier to follow, thanks.
Yeah, you can make the first one trigger at different spots, like this:
See the Pen GRQEgWP?editors=0010 by GreenSock (@GreenSock) on CodePen
But that won't return it to black at the very top when you scroll backwards because of the way you've got the logic structured (there's no callback for onLeaveBack). You could simply use a paused timeline to serve as the controller for the colors and jump around to the appropriate time on that timeline, like this:
See the Pen ExQXamX?editors=0010 by GreenSock (@GreenSock) on CodePen
Share on other sites
Create an account or sign in to comment
You need to be a member in order to leave a comment
Sign up for a new account in our community. It's easy!
Register a new account
Already have an account? Sign in here.
Sign in to follow this   Followers 2
Go to topic listing
Recently Browsing   0 members
No registered users viewing this page.
ScrollTrigger firing setProperty event on page load not when trigger is reached
“I've never worked with a product that has such fantastic and enthusiastic support. GreenSock is incredible in its own right, but the team behind it is really what makes it shine.”
“This is why I have absolutely no issues with paying for a subscription to GSAP, great product and awesome forum!”
“Truly, you folks on this forum are the nicest, least judgmental, helpful people I've ever encountered.”
“I'm always left with my mind blown by the way in which you guys quickly identify the solution and provide answers.”
“I am more and more amazed every day, and very glad that I decided to get a business license.”
“This is by far the fastest and most active community I've ever seen for getting personalized answers to questions. Only with the help of GSAP and this forum was I able to accomplish my project.”
“The best thing about GSAP is that it just works, and it works well. On every single browser I’ve tested.”
“No other animation library is as intuitive, rigorous, conceptually simple and well curated as GreenSock’s.”
“This stuff is so incredibly amazing I can't believe it. The level of details and options put into these things and the natural instinct GreenSock has for solving everyday problems is impressive.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.