Douglas

Hey; I did what you're looking to do on the site I was building when I asked that question. You can see an example with this link: https://nofixedaddressinc.com/#about It should auto-scroll to the "Magic before margins" section with that link. I just check to see if a hash exists and if so, run the same function that let's me click the nav to scroll to a position in the timeline.

Thanks @PointC, that worked! It's what I thought I'd have to do, though I admit I was hoping for there to be some more elegant built in solution. It works well though so no big! Cheers!

I need to be able to play through a GSAP timeline, and when it is completed, run a different timeline on ScrollTrigger. I did this using GSAP and ScrollMagic, and am now converting the site I built to use ScrollTrigger, but this specific requirement I am not sure which feature of ScrollTrigger I might use to make this happen. Tried disable and enable but it didn't seem to work. Here's the working example of the site I already built and am trying to translate over to ScrollTrigger from ScrollMagic: http://mischiefusa.com/ Thanks!

Hey again @ZachSaucier, I'm actually having a bit of a time implementing this on the site I shared with you yesterday. I have one long timeline that scrolls through the site (horizontal scroll). The sections are all variable width, have parallel techniques applied etc.. I tried implementing as-is from the demo in the hopes that it'd just sorta know where things are, but everything on the page is position: fixed and scrolls in from the right, so maybe it just thinks everything is at the "top" or something. Any insights you might be able to provide given my situation? I can provide more detailed info if there's something specific that might help. EDIT: I've fiddled some more and I see that I need to move to a certain position in the timeline based on the total timeline compared to the position of the section. Also I have multiple pages and am realizing that maybe the nav in my site hasn't been designed around that being the case, realistically this should be a sub-nav of some manner rather than a site nav. Apologies again - it's going to be custom and require much finagling. -.-

I'll PM you, if that's ok.

Hey @ZachSaucier thanks for the quick response. Unfortunately in simplifying my example I didn't provide some technically important info. I need to be able to do what I describe in between sections that have parallax and other effects. Basically I'd do this in between custom scrolling animations. That said maybe your proposed solution works anyway, technically. I may simply be having trouble wrapping my head fully around the duration/position concepts. It feels like a bit of a struggle to position the animations among each other in the ways I need to do so.

I'm building a site with horizontal scrolling for the whole site, but have been having a heck of a time doing the whole timeline pretty manually. I'd LIKE to have just a single foreach() which looks for all the <section>s on the page, and animates them one by one, like I have in this codepen: https://codepen.io/DouglasGlover/pen/gOrwbGV Problem is, as you can see, I'm currently adding them to the timeline one at a time, and using some basic math to say "this section is 60% viewport width, so start the NEXT animation at "-=" + 1.4 (duration of previous "out" animation, + (100 - {%width of previous section}). Issue being that the site is CMS driven and may... Completely lack the "previous" section that I intended (maybe the content manager doesn't put any content into a section, so we don't want to show it) Be over 100% viewport width I've had a quick go of it but as you'll see looking at my next codepen, I'm running on fumes here. Here's that attempt: https://codepen.io/DouglasGlover/pen/eYZBZvM So basically I'd like the first codepen I referenced above, but IDEALLY it'd work with a single foreach, and the sections should be able to be ANY width, or NOT EXIST at all, without breaking the whole timeline. Any help at all would be appreciated; I'm sure this is possible but I've been working basically nonstop on this site and it's running me ragged, so if anyone at all could provide a nudge in the right direction even that'd be amazing.

Well now I feel silly lol. I saw that demo, and didn't realize it was applying that extra plugin. *forehead smack* Thanks!

Great, that makes sense! I was using "main" as the container AND the trigger, and it's height was showing as zero. In my project I changed the trigger to the first element and it's resolved the issue. Thanks!

I have a large timeline animation and I need to be able to scroll to positions within it. I'm using ScrollTrigger, and I see that it has this: https://greensock.com/docs/v3/Plugins/ScrollTrigger/scroll() But I don't see how I'm supposed to add this to a timeline? I've used timeline.seek(), but this doesn't update the actual scroll position. Any help is greatly appreciated!

Hey, thanks for the response, and sorry for the delay getting back. Here's a demo: https://codepen.io/DouglasGlover/pen/VwajXNd Like I say, I may simply be doing something totally wrong here, but it just doesn't finish the timeline, even with this very simple demo. Ideas?

Little extra info as I play with it, trying to resolve: It seems that the whole timeline will scrub through, MINUS whatever my last animation added to the timeline is. I THINK it might be that the final section/div is coming on-screen and triggering the end that way maybe? I can add as many animations to the timeline as I want and it extends as long as is needed, except for whatever is the last animation. For now I've forced it to play nice by adding an empty div which is 100% width and having THAT be the last thing animated. This makes the actual last animation run just fine, and I'm only "missing out" now on the invisible div. Definitely not ideal, especially since I have a progress bar on the site and that's not accurate at the moment because of this, but the page "works".

Hi! Hoping to get a hand if possible, realizing of course that sans a codepen URL the first thing you'll likely say is "Codepen example please". So please bear with me as it's 2am so I'm going to describe my issue as best I can since building it out in Codepen would take a while. Long story short, I've built an animation and it works fine just playing the timeline, no ScrollTrigger involved. However when I add ST, it for some reason doesn't play all the way through. Logging to the console the ScrollTrigger's "self" onUpdate reveals that it always stop at the same "progress": 0.9283... Basically all I'm trying to do is create a site with horizontal scroll based on gsap animating everything in from the right offscreen, using xPercent from +100 to -100. I'll drop some code in here and maybe hopefully someone can go "Oh yeah you're using THIS thing wrong!". Timeline init: let tl = gsap.timeline({ scrollTrigger: { trigger: "main", pin: true, scrub: 1, start: 0, end: "+=" + 10000, onUpdate: (self) => console.log(self), }, defaults: { ease: "none", duration: 1 } }); Some sample animations in the timeline: // Animate out the landing page const landingSection = gsap.utils.toArray("#landing"); tl.to( landingSection, { opacity: 0, duration: 0 }, 10 ); // Animate in the case studies const caseStudySections = gsap.utils.toArray(".case-study"); caseStudySections.forEach(function(e, i) { tl.fromTo( e, { "clip-path": "inset(0 0 0 " + (100 - caseStudySections.length * 10 + i * 10) + "%)", }, { "clip-path": "inset(0 0 0 0%)", duration: 10 }, i*20 ); }); const plainFullScreenSection = gsap.utils.toArray("#plainFullScreenSection"); tl.fromTo( plainFullScreenSection, { xPercent: 100 }, { xPercent: -100, duration: 20 }, "-=" + 17 );