alexb148

@GreenSock that was quick work, thanks! I've had a brief play and it does seem to be doing what I'd expect now 👍 looking forward to the final release!

When creating a ScrollTrigger, I know that if I don't include the "scroller" property it will use the viewport, but I can alternatively give the id of an overflow scrolling element instead. But if I wanted to make the scroller value conditional, what is the default property I should use to tell it to use the viewport? For example: scrollTrigger: { id: triggerId, scroller: (useOverflow ? '#my-overflow-id' : ''), trigger: '#trigger-1', start: 'top top', end: 'bottom top' } An empty string seems to work, but I don't know if that's by chance - I obviously d

@GreenSock oh amazing, easy haha. By the way I can't currently see that mentioned in the docs though: https://greensock.com/docs/v3/Plugins/ScrollTrigger/disable()

I am revisiting this post as I have realised that I in fact did not solve this issue after all. Anything with scrub: true is reset to the start, as if I had never scrolled at all. Is it possible to disable a scrubbing ScrollTrigger and leave everything in the exact state it is at the time I disable it, even if mid-tween?

Hi Zach, thanks, I've done a bit more experimenting but am still having issues. I've created a codepen to illustrate: https://codepen.io/alexb148/pen/dyXbymq First off, I am animating the red (first) element using percentages (as I was in GSAP 2, and as per your example) but you can see that these percentages are converted to absolute px values instead. Secondly, I have tried using xPercent and yPercent values to animate the green (second) element, but noticed another issue - the path does not seem to treat the path points as I would expect. I have created 1

Hello, I am migrating an old GSAP 2 site to use GSAP 3 instead, but have just discovered that the bezier functionality has been removed and changed to MotionPath instead. My old GSAP 2 code was as follows: tl.to(element, 5, { bezier: { type: 'thru', values: [ { left: '-80%', top: '17%' }, { left: '-79%', top: '17%' }, { left: '9%', top: '17%' }, { left: '26%', top: '20%' }, { left: '38%', top: '34%' }, { left: '63%', top: '67.5%' }, { left: '75%', top: '81%' }, { left: '92%', top: '83%' }, { left: '100%', top: '83%

Thank you, I hadn't spotted those options in the docs - yes this does the job. Thanks for the rapid reply!

I'm building a site using lots of ScrollTrigger animations. There are some places where all I want to do is simply use a trigger to fire off a function when the user gets to a point on the page. Is this possible? I almost always use timelines (to keep everything consistent, and so that I can easily kill them if I need) so my instinct is to do something like this: var tl = gsap.timeline({ scrollTrigger: { trigger: '#myTrigger', start: 'top 80%', toggleActions: 'play null play null' } }); tl.add(function () { console.log('do something'); });

Actually, my bad - "disable" doesn't reset everything, I misunderstood the documentation. For reference, I am giving all my ScrollTriggers an ID, and then using ScrollTrigger.getById(i).disable(); to pause the ScrollTriggers, and ScrollTrigger.getById(i).enable(); to resume again. Problem solved! Update: problem not solved - see new comment in the thread

I am creating several timelines controlled using ScrollTrigger, and that's all working great so far! What I'd like is to temporarily pause and then later resume the scroll listener. Essentially, pause and be able to scroll the page without my timeline playing, whilst leaving everything in the state it was at the moment I paused it. Then resume, and have everything immediately start responding to the page's scroll position again. Is this possible? I can see that there is a "disable" method, but this appears to unpin and reset everything as if the page hadn't

Ah ok, thanks very much - I had thought that killing a timeline did this automatically, but individually clearing the props on each element after killing does the job!

I absolutely love that GSAP now has ScrollTrigger built in - it's a game-changer! However, I'm struggling with one thing - killing and resetting a timeline. I am initialising like this: var tl = gsap.timeline({ scrollTrigger: { id: "trigger1", trigger: "#trigger", start: "top bottom", end: "top top", scrub: true } }); tl.fromTo( "#element", { opacity: 0, x: 500 }, { opacity: 1, x: 0 } ); First I tried simply killing the timeline, assuming that would also kill the scroll trigger, but this appears to have no effect