Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

5 Newbie

About alexb148

  • Rank

Profile Information

  • Location
  1. Haha damn, I almost feel bad for apparently finding something so obscure 😂 awesome work though, thanks!
  2. Yep, changing my CodePen or the project I'm working on to use 3.5.1 does indeed fix the issue. Is this a 3.6.x bug then? I shall stick with 3.5.1 for now, thanks.
  3. I am trying to use the stagger effect within a GSAP 3 timeline, as per the attached CodePen. However, if my stagger doesn't start immediately, then the elements I'm staggering don't immediately render their initial state - even if I set immediateRender to true. If i remove the "stagger" part of my animation then the immediate render works fine. What am I missing or doing wrong? Thanks
  4. @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!
  5. 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
  6. @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()
  7. 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?
  8. 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
  9. 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%
  10. Thank you, I hadn't spotted those options in the docs - yes this does the job. Thanks for the rapid reply!
  11. 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'); });
  12. 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
  13. 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
  14. 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!
  15. 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