Jump to content

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


  • Posts

  • Joined

  • Last visited

Everything posted by ferriss

  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.
  14. Thanks, I should've looked harder, I just assumed the scrollTrigger: {} within GSAP was redundant and you have to put it on the ScrollTrigger.
  15. 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 } } } })
  16. 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.
  17. Hi, Is it possible to use matchMedia (which I assume if the only way to add responsive breakpoints) within gsap? Your docs mentions this is the most common setup, but I cannot see a property that allows using breakpoints using that setup, only by using the standalone version? I'm currently using the common setup like so: gsap.to(container, { x: () => -(container.offsetWidth - document.documentElement.clientWidth) + "px", ease: "none", scrollTrigger: { trigger: container, pin: true, scrub: true, end: () => "+=" + container.offsetWidth } }) This is to do a horizontal scroll lock. On mobile I just want to stack, so the only way I can see to do this is re-code into a standalone setup and then use .matchMedia()? Or is there another nested property. Thanks
  18. Hi, Hopefully this is simple question to not need a reproduction. I have a Header with scrollTrigger: ScrollTrigger.create({ trigger: '.l-header--sticky', start: 'top top', endTrigger: 'html', end: 'bottom bottom', pin: true, pinSpacing: false, markers: true, scrub: 1 }); Half way down the vertical page, I have a horizontal scrolling section: gsap.to(container, { x: () => -(container.offsetWidth - document.documentElement.clientWidth) + "px", ease: "none", scrollTrigger: { trigger: container, pin: true, scrub: true, end: () => "+=" + container.offsetWidth } }); Now, this means the calculation for the header endTrigger is wrong as it's not taking into account the horizontal vertical scroll. Cannot see anything in the docs to refresh this calculation? Thanks.
  19. Here I've made a reduced test case: https://codesandbox.io/s/white-microservice-pi1by If you click about, it works the first time, but then if click home and then back to the about page, only the first scrollTrigger reveals. The rest do not work.
  20. I think the issue here is to do with the fact I'm using .batch() or more than 1 instance of ScrollTrigger. Yet there is only 1 ScrollTrigger.scrollerProxy in the example, it's not setup to work with multiple instances?
  21. Hi, Using the attached codepen, I have this working fine. But when setup in a NuxtJS or equivalent environment with ajax route changes the ScrollTrigger.scrollProxy stops calling. I've tried ScrollTrigger.kill() on the destroyed() method of NuxtJS, but whenever I go back to the route with the setup, scrollTop() doesn't call within ScrollTrigger.scrollProxy. Thanks