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.

  1. I started doing an MVP and adding a wrapping div fixed my issue.
  2. Hi, I couldn't find if there is something in the docs for this, but I have an element that has a basic transform parallax on it. That same element has a basic toggle class on it when it hits the top of the viewport, however, the makers on the this latter animation are wrong as it takes it from before the parallax. I guess I need to offset it with the transform? But is this performant as the trigger point is constantly changing? The two animations. gsap.to(".js-pick-me-up", { ease: 'none', scrollTrigger: { trigger: ".block-intro", scrub: true, start: "top top", end: window.innerHeight, }, y: window.innerHeight / 2 }); and ScrollTrigger.create({ trigger: ".js-pick-me-up", end: "bottom bottom", start: "top top", toggleClass: 'is-fixed' }); Thanks
  3. Thanks, I used a mask! It's a bit dis-jointed and feels hacky, I think using Canvas would be better, but it's fine for my example.
  4. Hi, Trying to get an animation working together from a couple of examples. I've got the perfect setup for the SVG path and speed, but this is a single path, I'm of the understanding that I require this so be done via Canvas if I want to apply a rough brush effect seen here — https://codepen.io/lbebber/pen/GJrxdR Unless there is another way to apply a rough brush effect and maintain an animation, but I suspect not as it needs to follow a single path? Couldn't find any examples that mix this brush effect and canvas. Thanks
  5. Strange, it's working now, really odd. Will re-open if I replicate again.
  6. 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
  7. I was using SVGOrigin. Oops.
  8. Thanks @Cassie Still not getting it working with either of those 2 options, please see demo here — https://codepen.io/CHEWX/pen/QWMbJqd
  9. 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
  10. Hey @akapowl With this approach, `intertia: true`, doesn't work? Is that right?
  11. 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
  12. @akapowl Nice, scroll-proxy works really well, thanks!
  13. 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.