[Slow scrolling and laggy animation on Chrome but near perfect in Safari]

I had this same issue except it was the other way around - smooth on Chrome but very laggy on Safari. Solution: wrap all the images in divs and apply GSAP animations to the div instead of the img element. 

[Scrolltrigger horizontal and vertical sections with snap]

Thanks so much @Rodrigo! Exactly what I wanted to do. 😊  But now I thought of one more thing which would make it even better. Is it possible to have something like the native scroll-snap-type: proximity ? So that it would only snap when the scroller is closer to the element. I found a promising CodePen 

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

so I'm going to try it myself.

[Scrolltrigger horizontal and vertical sections with snap]

Hi,

 

Posting here as my issue is somewhat related.

 

Basically what I want to do is to snap to any specified elements inside the fake horizontal scrolling container.

 

Here's a demo: 

See the Pen VwBpdGE by matias_autio (@matias_autio) on CodePen

 

So in this demo, I would want to snap to all the .decades. And there can be a random number of .items between them.

 

Only thing I can think of is to calculate their relevant positions as percentages compared to the overall width of my ScrollTrigger but it seems rather complex and I was wondering if there is an easier way to do it. 

[clearProps?]

Just a quick note that might help someone: make sure you use true (boolean) and not "true" (string) - was scratching my head for a good while because of this  (or just use "all" )

[Scrollable overlay]

Hi!

 

I have made a scrollable overlay that transitions to show the page under it. I want the overlay to disappear when scrolled to bottom.

 

I have set it to trigger the animation on start: 'top 1' and it works great.

 

I just can't understand why start: 'top top' doesn't work - is it a bug or is there some logical explanation? Thanks!!

See the Pen dyzjKzz by matias_autio (@matias_autio) on CodePen

[Reset Timeline on Complete]

On 2/25/2021 at 9:44 PM, GreenSock said:

That'll clear all inline CSS properties of each tween's target as soon as each tween is done. That's probably not what you want. If you really want to clear everything at the end of the timeline:

gsap.timeline({ onComplete: () => gsap.set(".all-your-targets", {clearProps: true}) });

That's highly unusual, though. You do realize that'll revert any changes that were made by the animations, right? 

I found this approach useful for animating a modal in, and then when the closing animation completes to revert the modal element to its original state so it can be opened again.

[GSDevTools animation ID's not working?]

10 hours ago, GreenSock said:

Sorry about the confusion there - it was a regression in a recent version which should be fixed in next release which you can preview on CodePen at: https://assets.codepen.io/16327/GSDevTools3.min.js (you may need to clear your cache first). Better? 

Working now! Thanks! I thought I was going crazy... 

[GSDevTools animation ID's not working?]

Hi, 

 

It seems the id's of animations don't show up in the drop down menu... not even on the official demos like the one linked. Could not get it working on my local machine either. Is it broken or am I missing something here? 😅 Thanks.

See the Pen MEYdxr?editors=1010 by GreenSock (@GreenSock) on CodePen