Jump to content

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


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

ferriss's Achievements

  1. Strange, it's working now, really odd. Will re-open if I replicate again.
  2. Hi, I'm trying to animate a fade of an element that is hidden. gsap.to( this.$nav, 1, { opacity: 1, display: 'block', onComplete: () => { console.log('Open') } }); The onComplete is fired when display block is complete, not the whole animation. If I remove the display block, the onComplete works as expected (after 1 second). Should the onComplete work with all properties? Thanks, Tom
  3. I was using SVGOrigin. Oops.
  4. Thanks @Cassie Still not getting it working with either of those 2 options, please see demo here — https://codepen.io/CHEWX/pen/QWMbJqd
  5. Hi, I have an issue where I can set the `transform-origin: x x` with CSS and `transform: rotate(xdeg)` and it works correctly, when moving this into GSAP it changes the transform to matrix and it doesn't transform on the correct access, it actually change the origin to `0 0`, I've I override with CSS it's still wrong but i suspect that's because of the matrix calculation. Current setup: ``` var rotate = gsap.timeline({ scrollTrigger:{ trigger: $('.js-animation-dial'), scrub: true, markers: true, } }) .to('.svg-dial__dial', { rotation: 360*5, transformOrigin: '168px 163px', ease: 'none', }) ``` To note, I'm not trying to animate the transformOrigin, that needs to stay the same. Thanks
  6. Hey @akapowl With this approach, `intertia: true`, doesn't work? Is that right?
  7. ferriss

    NPM Build Error

    Hi, There are some fixes that I need for my site in BETA, which I assume is 3.7 However, Netlify isn't building them but I suspect this is because Codepen have a CSP in place. Is there another URL I can use? 5:39:27 PM: npm ERR! 403 403 Forbidden - GET https://assets.codepen.io/16327/gsap-beta.tgz
  8. @akapowl Nice, scroll-proxy works really well, thanks!
  9. Hey @ZachSaucier Great demo above, but it doesn't seem to fit the above examples. As such I've tried to recreate the above using your code but it's not having the same effect, is the drag resets the progress to zero. https://codepen.io/CHEWX/pen/eYvEzEd Be good to see if it's a simple fix. Thanks.
  10. Thanks, I should've looked harder, I just assumed the scrollTrigger: {} within GSAP was redundant and you have to put it on the ScrollTrigger.
  11. Ah, noted on the Media Query events. — Regards to the .matchMedia(), are you saying I can do it like this: ScrollTrigger.matchMedia({ "(min-width: 800px)": () => { gsap.to(container, { x: () => -(container.offsetWidth - document.documentElement.clientWidth) + "px", ease: "none", scrollTrigger: { trigger: container, pin: true, scrub: true, end: () => "+=" + container.offsetWidth } }) } }); As this looks wrong to me, so my question is, do I need to re-code the opening posts setup to use .matchMedia(), without using scrollTrigger: {} within GSAP. or the other question was, is there a property to use within the animation. gsap.to(container, { x: () => -(container.offsetWidth - document.documentElement.clientWidth) + "px", ease: "none", scrollTrigger: { trigger: container, pin: true, scrub: true, end: () => "+=" + container.offsetWidth, matchMedia: { "(min-width: 800px)": () => { // Do Something } } } })
  12. From your docs: The above example isn't using that setup, so won't allow the use of .matchMedia() without re-coding to a standalone setup? Yes, I'm aware of JS media queries, but I then didn't want to add in resize debouce as I was hoping GSAP had this in-build so you can resize the browser and it'll degrade without refreshing.