elegantseagulls

This issue may be caused by the size of the image and certain browser/hardware's abilities to keep up with the repainting/hardware acceleration of the very large image: the browser has to keep track of the overflow of image off-screen as it doesn't have a concept of what part is going to be transformed. This is especially true with clip-path. Have you tried an image more cropped to fit or removing the clip-path to see if that helps?

This may help get you better started with using GSAP: https://www.creativecodingclub.com/courses/FreeGSAP3Express

For these: opacity is misspelled. And you'll want to register your drawSVG plugin by adding gsap.registerPlugin(DrawSVGPlugin) to the top of your js. The target not found errors look like maybe there's more errors in your js or it's running before those elements are available in the dom (or maybe they on another page, and you aren't conditionally checking for them).

This might be a good application for something like quickSetter or quickTo: https://greensock.com/docs/v3/GSAP/gsap.quickSetter() https://greensock.com/docs/v3/GSAP/gsap.quickTo()

You could also use css custom properties to avoid having to match all the transform strings exactly. css: .cube { --scale3d: 1, 1, 1; transform: scale3d(var(--scale3d)) translate(50%); } js: gsap.to('.cube', {'--scale3d': '2, 2, 2'})

You'll want to remove scrub: true, otherwise the timing will be dependent on how fast you are scrolling. You'll also want to set duration: 2, (in your example code above, you have the duration default set to 100 seconds, which is really quite long). If you're looking to have it animate on every 'enter' check out the toggleAction controls: https://greensock.com/docs/v3/Plugins/ScrollTrigger

You have scrub: true, but aren't letting the ScrollTrigger scroll to the bottom of the section to "scrub" it, if you want it to just slide in onEnter, don't set a scrub value, otherwise add some space at the bottom (an additional section) or change your start/end values to accommodate for the scrub distance.

I'd wonder if webflow is lazy loading images that are causing the page to move the start and end points, which is why I was asking what the start/end points look like in the markers. Also, are you seeing anything in the console that may give some clues?

You have markers set to true, what are those showing you? Is there any way you can provide a minimal demo?

It looks to me like the bottom of the peel is being cropped. Maybe consider animating a clip-path for that layer, so you can better tune in the way it moves together?

I think for this, and the current browser support, I'd probably try to animate clip-path: Start with something like: clip-path: inset(40%); Then gsap.to('.el', { clipPath: 'inset(0%)' } https://codepen.io/elegantseagulls/pen/mdGymXP

The problem is you are animating an element's height, and that's changing the document's height, which makes it really challenging for ScrollTrigger to figure out pinning and unpinning, even with pinSpacing: false turned on. For this, I'd suggest maybe sliding/overlapping the next accordion over the top of the previous one and pinning it to the bottom of the previous' title. This will be far more performant. Something like this, with enough offset at the top to read titles (you'll also need to make sure you add an end element to each section stays pinned): https://codepen.io/GreenSock/pen/KKpLdWW If you must animate the height, running a ScrollTrigger.refresh() onUpdate (and pinSpacing: false) may fix the issue, but I'd be very concerned about performance for this.

It looks like maybe you're still setting this up, as it's changed a few times as I've refreshed. thisAnimWrap.scrollWidth and window.innerWidth are putting out the same value, so your gsap is tweening from 0 to 0.

I've found that adding a mix-blend-mode: difference to the logo is often 'good enough' (it's what we use on https://www.elegantseagulls.com/) so long as the logo is black/white, other wise, it's going to be a performance suck on each tick/scroll to measure the color of the pixels right behind the logo. This will get even tougher with background-images and gradients. If you just had a dark/light mode colors for the logo, you could add an option in the CMS for each <section /> for logo-overlay and use ScrollTrigger to adjust to that via onEnter/onEnterBack, or you could have scrollTrigger trigger a gsap.getProperty() (https://greensock.com/docs/v3/GSAP/gsap.getProperty()) to get the background-color of the section and adjust according to that. But I'd very much advise against watching every nested element on a page, as that's going to be a performance suck.

Your best bet is to create the SVG polygons not inside a pattern (it will be more markup, but will be much more performant). If you need to do this for different sizes, you'll just want to dynamically generate the SVG and the polygons based on size of container.

@Carl is correct, you cannot target individual pieces of a pattern. Also, if you are animating pieces of SVG patterns, the performance is really really bad (from personal experience).

I think you could also use getVelocity and check if that's 0 inside the scrollTrigger object: https://greensock.com/docs/v3/Plugins/ScrollTrigger/getVelocity()

It might be worth looking at this demo from the GreenSock website: https://greensock.com/docs/v3/Plugins/Observer - This one is implemented using Observer, but the same principles can be applied using standard ScrollTrigger.

Hey @iotron, I haven't had a chance to deep dive into what you're looking to do, but I created this 3d slider (vertical, and opposite radius location), but implements snapping. Here's my walk-through on how to build it: https://frontend.horse/episode/behind-the-scenes-elegant-seagulls CodePen: https://codepen.io/elegantseagulls/pen/GRxNJGK

Hey @amsterdamAL, One thing I noticed is that you are using some outdated GSAP plugins and code: Namely ThrowProps is now Inertia Plugin: https://greensock.com/docs/v3/Plugins/InertiaPlugin Also, no need to use "TweenLite" any more everything can be called via gsap. -- gsap.to(), gsap.set(), gsap.timeline().to().from()... etc.

Do you still get the error if you getById then kill it? GSDevTools.create({ id:"main" })) GSDevTools.getById("main").kill()

This is a pretty complex functionality, but I'll try and point you in the right directions... For this, you'll want to create a timeline and use the position of your drag proxy to link 'scrub' the progress of the timeline. These are different ideas, but use draggable to control different timelines, which is more or less the same concept you're looking for: https://codepen.io/elegantseagulls/pen/eYRgXpd https://codepen.io/elegantseagulls/pen/GRxNJGK?editors=0010

I'm not sure that GSDevTools is something that's meant for production... but to kill it, from the docs: How do I kill/destroy/remove the dev tools instance? If you have a reference to the dev tools (it's probably easiest to give the dev tools instance an id, i.e. GSDevTools.create({id:"main"})) then you can kill the instance by using GSDevTools.getById("main").kill().

I do believe you could create the flip animation during the Barba transition, when both new and outgoing elements are available to the dom, to get the effect you're looking for.

To achieve this, you'll want to get the position of each circle and check that against the position of your cursor (or use a mouseEnter or mouseOver event listener), I think it'd be best to use something like quickTo to change position of the follow ring. Docs on quickTo here: https://greensock.com/docs/v3/GSAP/gsap.quickTo()