Paul Schlereth

Hey Team - that's all helpful input. I think I need to enqueue the init script (contains js plugin registration) to the footer. Jack's comment about having the DOM loaded first was a bit of a "ugh how did i not remember that" moment for me, lol. SMH. Thanks again! And thanks Rodrigo, thankfully i do have the dependencies being declared.

Hey Team - thanks for the response. As can be seen in this file: https://livecanvas.ignitesolutions.com/wp-content/themes/picostrap5-child-base/js/gsap/init-smoother-demo.js?ver=6.2 I am registering the plugin: gsap.registerPlugin(ScrollTrigger, ScrollSmoother, SplitText, DrawSVGPlugin);

Hey Team - I'm creating some GSAP parallax demos at the following url: https://livecanvas.ignitesolutions.com/smoothscroller-parallax/ I get the following error in Chrome devtools Console: caught TypeError: Cannot read properties of undefined (reading 'indexOf') at A (ScrollTrigger.min.js?ver=6.2:10:566) at K (ScrollTrigger.min.js?ver=6.2:10:1243) at $.getScrollFunc (ScrollTrigger.min.js?ver=6.2:10:35446) at new ScrollSmoother (ScrollSmoother.min.js?ver=6.2:10:5532) at r.create (ScrollSmoother.min.js?ver=6.2:10:11576) at init-smoother-demo.js?ver=6.2:4:33 I looked through a few similar forum posts but am unable to resolve. Any thoughts as to what I might be doing incorrectly? -Paul

Actually the unfortunate bit is that my setup isn't working. The position value that is coming out of the first added timeline isn't accurate until that timeline completes. Unfortunately, the second added timeline starts working before that happens. I haven't seen a good solution for this yet.

i tried that also. Same issue as position().left via jQuery

Valid point - i'm having a hard time calculating the next position for $heroContent01 (the content column) if I don't have the final position from the prior timeline. Within the second added timeline, I've been trying to: var heroRowLeft = $heroRow.position().left; // parent container of the content column var heroContentLeft01outStart = $heroContent01.position().left; // this is the variable that will contain an inaccurate number var heroContentXoffset = heroRowLeft - heroContentLeft01outStart; // new position tl.to($heroContent01, 2.0, { x:heroContentXoffset }, "-=1.5"); Is there a better way to position the left of this column along the left edge of its containing .row? I'm trying not to explicitly use absolute positioning for responsive layout convenience. Since this uses a calculation, and the prior from animation is a percent, this should calculate specific to devices just fine - unless I'm missing something.

So will each individual sub timeline call the master onComplete fcn, or does that only run once the master is complete? I need sub timeline 2 to be able to get the end positions of elements after having been animated by sub timeline 1.

Hey Craig - thanks for the response. So when I add multiple timelines to the master timeline, how do I force subsequent timelines to wait until the prior timeline has completed? Please check my modified CodePen: https://codepen.io/paul77/pen/zQGRZg I've added another timeline, the start of which relies on correct left position as it was from the prior timeline. Note that the initial value output to the screen is really huge, then changes to a smaller value. My second timeline starts before this correction happens. Since I know I can add multiple timelines to the master, how do I prevent this race condition? In this second example, my goal is to be able to position the column of copy near the left edge of the screen - not fly off the screen. Thanks again.

Hey Team - I've searched for solutions but I am still stuck as to why I'm getting confusing left position results. You can see from the supplied CodePen that I'm displaying the left position of a Bootstrap column before and after a transform from off screen right. Even after using clearProps I'm still getting a huge number for the left position after the animation finishes. The number looks like the left position that GSAP created for the starting position for the off screen animation before it animated onto the screen. I think the two reported positions should match. When I try to utilize this end-state left position for subsequent animations everything is off because the position is seemingly misreported. What am I missing / doing wrong? I would really appreciate an assist, this has been quite frustrating. -Paul