Jump to content


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

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

  1. SuperHero. Need to spend more time with ScrollTrigger/GSAP.
  2. To explain result, if viewport is 400px and each item is 100px, then opacity should be 1, .66, .33, .0. If you scroll 400px, then the items in view should still be those values so the fade always shows and transitions as you scroll.
  3. Hi, I've got a setup where I require a nested ScrollTrigger. As per the link, I only want the animation to trigger if inview, but it seems to just be applying to all. So the initial load is how it should look all the while in terms of opacity regardless of scroll, but the scroll is applying to all li items instead of those only in view. I would assume, if it applied to only inview, then the animation would work as expected. Thanks
  4. Hey, Most of the time I create HTML blocks with margins, as they collapse so they work well together when using a CMS. However, when using ScrollToPlugin it ignores the margin as it's outside the box-model, is there a way that I can include margin without using offsetY as offsetY will then not play ball with blocks that are full-bleed without margins. Thanks
  5. I started doing an MVP and adding a wrapping div fixed my issue.
  6. 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
  7. 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.
  8. 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
  9. Strange, it's working now, really odd. Will re-open if I replicate again.
  10. 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
  11. I was using SVGOrigin. Oops.
  12. Thanks @Cassie Still not getting it working with either of those 2 options, please see demo here — https://codepen.io/CHEWX/pen/QWMbJqd
  13. 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
  14. Hey @akapowl With this approach, `intertia: true`, doesn't work? Is that right?