[GSAP Animations lagging (ScrollSmoother + Optimisation?)]

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?

[drawSVG not working]

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

[drawSVG not working]

3 minutes ago, thomasJack said:

Invalid property opcaity set to 0 Missing plugin? gsap.registerPlugin()

Invalid property drawSVG set to 100% Missing plugin? gsap.registerPlugin()

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).

[scale3d() not supported ?]

19 minutes ago, cesare.polonara said:

elegant solution to granularly change in the transformString only the property that actually changes

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()

 

 

[scale3d() not supported ?]

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'})

 

 

[Animations translate on scrolltrigger don't work]

6 hours ago, Andy777 said:

but now want the duration to during 2 second

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

 

 

 

 

[Animations translate on scrolltrigger don't work]

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.

[Animations translate on scrolltrigger don't work]

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?

[Animations translate on scrolltrigger don't work]

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

 

[Peel Token]

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?

[Scrolltrigger zoom through element and then scroll]

3 hours ago, rm2773 said:

Would someone be willing to show this reveal with a rectangular reveal shape, versus the circle shape

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%)' }

 

See the Pen mdGymXP by elegantseagulls (@elegantseagulls) on CodePen

 

[Scroll-controlled accordion with ScrollTrigger]

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):

See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen

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.

[how can I duplicate sections in gsap.context]

1 hour ago, PavelZolotin said:

I have the same working version but on native js

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.

[ScrollTrigger: changing the logo colour depending on the page background colour immediately behind a specific point]

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.

[Random reveal]

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.

[Random reveal]

2 hours ago, cookingsherri said:

Any ideas?

@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).

[Detect if scrolling stopped with scrolltrigger]

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()

[How to make this swipe section effect with Scrolltrigger, need help]

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.

[Need help with GSAP slider]

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:

See the Pen GRxNJGK by elegantseagulls (@elegantseagulls) on CodePen

[React + swipable draggable proxy carousel not working]

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.

[GSDevTools and React (18)]

Do you still get the error if you getById then kill it?
 

GSDevTools.create({ id:"main" }))

GSDevTools.getById("main").kill()

 

[I need help implementing coverflow using Draggable.]

This is a pretty complex functionality, but I'll try and point you in the right directions...

 

18 minutes ago, bs.choi said:

I tried several methods, but I didn't know how to give an animation while dragging, so I only implemented it with onDragEnd() as the next best solution.

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:

See the Pen eYRgXpd by elegantseagulls (@elegantseagulls) on CodePen

See the Pen GRxNJGK?editors=0010 by elegantseagulls (@elegantseagulls) on CodePen

[GSDevTools and React (18)]

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().

[Animate an element and a property of an element within that element]

3 hours ago, Rodrigo said:

No, what you can do is create an element that has the same position and dimensions that it has  in the next page, create the Flip animation and once that is complete make the page transition. You cannot create a Flip animation (or any animation for what matters) for an element that is not in the DOM yet.

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.

[How can I achieve this effect in codepen effect (canvas) with DOM elements. Please help. I'm very confused about the working of the code.]

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()