elegantseagulls

I'd imagine this is cause it's an absolute value and once it rotates to that value (transform: rotate(-170deg)) it's trying to just tween from that value to that value, so it's not doing anything. Maybe try a relative value using += or -= eg: rotation: '-=170',.

Also, have you tried the useLayoutEffect(() => {},[]) hook? It sounds to me like ScrollTrigger is trying to calculate things before the layout is done rendering (with it working on resize). Or make sure to check if your ref is available in the dom before running your function. This may also be helpful with this (useIsomorphicLayoutEffect):

Not sure what your dev structure looks like, but you could put the headerItem tl after the standardAnim() function call. That way if that function is there, it'll put that into the timeline before it looks at the headerItem addition to the timeline. If you can't do that, you could do something like: const tl = gsap.timeline(); const headerTL = gsap.timeline() const standardTL = gsap.timeline() const headerItem = $(".category-header__item") headerTL.to(headerItem, { ease: 'back', autoAlpha: 1, duration: 10, }) function standardAnim() { standardTL.to('.category-bg__standard', { autoAlpha: 1, scale: 1, duration: .6 }, '<') .from('.category-standard__item', { ease: 'slow', autoAlpha: 0, scale: 0, duration: 1.8 }) .from('.category-title', { ease: 'slow', autoAlpha: 0, y: 70, duration: 3.4 }) } if($('.category-standard')[0]) { console.log('Standard') standardAnim() } tl.add(standardTL).add(headerTL)

I think this would be a good use case for function-based values:

The wavy effects on that site are built with WebGL, likely using something like: https://www.curtainsjs.com/ You could also consider get a similar effect if you animate an SVG filter over an embedded image... Something like: https://codepen.io/osublake/pen/WQyBJb but with a different filter shape.

The issue with this is that the horizontal animations are technically part of the scroll. If you try to skip these sections, you'll either have to pass a large blank space (the space the horizontal scrub is actually scrolling when pinned) or you'll have to re-flow the page, which is really difficult to calculate the current/previous/future scroll positions, and browsers don't like to repaint things like this, so there'll likely be some glitchyness.

Everything you need should be in this article.

No problem! Helpful tip for this sort of animation: when scrubbing sections like this, I like to keep the timing for each "section" segment as `duration: 1` so that it's easy to calculate, the timing for each.

@chrisgannon has a lot of complexities going on in his button. I'd recommend starting simple with your own design and working up from there than just trying to pull a larger complex animation into your site all at once.

The code I provided seems to work for me: https://codepen.io/elegantseagulls/pen/PodWOWa?editors=1111 Check this out for react: This is the basics on converting GSAP2 to 3:

I'd probably try to handle a lot of gsap.set() in your css rather than JS. Can you elaborate on what you mean by:

const tl = gsap.timeline() tl.to(['.sun', '.moonMask', '.moon'], { attr: gsap.utils.wrap([{cx:'-=140', cy:'-=20'}, {cx:'-=140', cy:'-=20'}, {cx:'-=90', cy:'-=0'}]), duration: 1, stagger: yourStaggerAmount // yours is currently none, so you could remove this line } Check out GSAP's wrap utility to compare to the old cycle: https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap() I haven't had my coffee yet, so let me know if this has issues ☕

I just tried this in FF Dev, and am not seeing anything gsap realated in the logs. I just updated my browser today, and nothing different. I wonder if you have a setting toggled in your Dev Tools in FF, but I couldn't find any that'd cause this.

I use this browser almost exclusively, and have never had GSAP log anything that I wasn't expecting. Can you set up a minimal demo in CodeSandbox or StackBlitz or similar to show this?

Ah yes, that's cause it's taking the transformed position of the element. const parallax50 = gsap.utils.toArray('.parallax50'); parallax50.forEach(lax50 => { gsap.fromTo(lax50, { yPercent: 50, }, { yPercent: -50, ease: 'none', scrollTrigger: { trigger: lax50, start: "-50% bottom", //top of element (offsetting 50% "from" transform), bottom of viewport end: "50% top", //bottom of element (offsetting -50% "to" transform), top of viewport scrub: true, markers: true, } }); });

You'll need to keep that in your original .forEach() loop.

Try this: gsap.fromTo(lax50, { yPercent: 50, }, { yPercent: -50, ease: 'none', scrollTrigger: { trigger: lax50, start: "top bottom", //top of element, bottom of viewport end: "bottom top", //bottom of element, top of viewport scrub: true, markers: true, } })

This is to prevent a horizontal scroll bar, which can mess things up (transforms vs real scroll). If you want the box animation to be longer/tied to the pin, you'll maybe want to consider adding it as part of the timeline, and dividing the timeline's duration up to match the ratio of each animation. I updated my codepen to show how this would look: https://codepen.io/elegantseagulls/pen/ExegKJN?editors=0010

You went above and beyond, though!

The apple site is adding a position: sticky; to the text, then achieving the gradient effect by animating a mix-blend-mode: darken; colored gradient vertically (in that same sticky container). You could do the same thing with ScrollTrigger and pinning, pretty easily. Similar to this, but animating a gradient instead of parts of a shoe: https://codepen.io/GreenSock/pen/gOabMXv

It looks like you're setting up your horizontal scrollTrigger's CSS/html incorrectly: You'll need a wrapping container to hide the horizontal overflow. Also, since the horizontal scroll is ending with the '.box' in the center, the end of the scrub will never be completed. Made some small tweaks: https://codepen.io/elegantseagulls/pen/ExegKJN

Yep! My response got submitted too early, and then I got distracted. Definitely check out @PointC's tutorials! They are great!

It looks like maybe your path export isn't setup for drawSVG.

For these sorts of things, I usually just use: overflow: visible!important; on my SVG elements. It'd be a tough ask to try to figure out how to constrain/contain shapes in the viewBox automatically (does the height change, with the width, etc). Also, animating the viewbox can have some performance implications too.

I'd be less concerned about file-size than I would overall paint size (how much area/screen the image takes up), maybe try just putting a div in the image's place and see if that's the issue.