ferriss

Hmm, cannot really create a minimal demo as it's a built up example and to strip it back will probably loose the issue. It's basically a nested scroll trigger, so something is always being triggered, so it's performance hungry. On modern machines it seems ok, but on older machines/browsers it's extremely laggy. I suspect scroll thread is being maxed? Are there quick performance wins here such as scroll proxy? Or is this going to need a re-architect? At what point are there too many animation going on, particularly on scrub?

Hi, Got a really strange pinning issue where if I have chrome inspector docked and open I cannot replicate however when it’s closed scrub: true isn’t working as expect and I can hold down scroll on the Magic Mouse and the end will not trigger until I let go of the mouse. As if it’s listening to mouse up event, but this is only while the chrome inspector is closed. When it’s open the end triggers in the correct point regardless of whether I’ve taken my finger off the mouse after scroll. Very odd?

All the JS is what I want to refactor. It’s as minimal as possible! As such can any of it be combined?

I've done this now @Rodrigo, but seems excessively complex from a GSAP point of view? Can it be refactored?

Got a tricky animations to complete and every time i try i hit another issue. I have 3 unique screens (can be many fade in and out animations though). I want each text to fade in when the bottom is 200px from the bottom of the viewport and finish center center and then pause on scroll for say 200px and then fade out when the top hits 200px from top. Finding it difficult to chain though, and also to work out how the second animation can start when the first has finished.

Great thanks. I have a side-effect issue, whereby because each section is fixed. How do I apply other GSAP animations as the trigger positions are wrong, for example one section might be 100px from the top, but really you need to scroll 3100px to get to it, but because it's fixed the trigger start position is 100px.

I've just updated the original pen with a working version, not sure if it's the best way to code it as adding the heights together seems an odd way to do things?

Thanks for your post. The initial setup is for a reason as all sections need to be at the top in theory. The example you’ve posted is the opposite I want, I’d like the inverse. So only the layer that’s on top will scroll. Underneath doesn’t scroll until top layer is out of view at the top.

Hi, I've seen this example of scroll and pullover, but not seen the inverse of this. Is it possible? https://www.polybion.bio/ I've attached my base, I basically want to scroll and section one scroll up and once the bottom of section one hits the top, the next section pulls pull and then once the bottom of that hits the top, the next one pulls up. Currently they all scroll, but section 2 should say fixed until section 1's bottom hits the top. Thanks, Tom

SuperHero. Need to spend more time with ScrollTrigger/GSAP.

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.

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

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

I started doing an MVP and adding a wrapping div fixed my issue.

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

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.

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

Strange, it's working now, really odd. Will re-open if I replicate again.

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

I was using SVGOrigin. Oops.

Thanks @Cassie Still not getting it working with either of those 2 options, please see demo here — https://codepen.io/CHEWX/pen/QWMbJqd

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

Ah, Bingo.

Hey @akapowl With this approach, `intertia: true`, doesn't work? Is that right?

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