Conflict between two pin animations

[mikhael]

Hi all 🫡

 

I use two pin animations In the first, the block stands still and the photo is scrolled from bottom to top from the top of the text. in the reviews block, the block also stands still while the animation is running, containers with reviews should move from right to left. Separately, the animations work as they should, but together for some reason an incomprehensible flickering effect occurs. Tell me what could be the problem ?

See the Pen QWPEeRP by mikhail21990 (@mikhail21990) on CodePen

[GreenSock]

I didn't have a lot of time to look at this, but it appears to me as though you were creating the ScrollTriggers in the wrong order. You should always create them in the order they appear on the page, -OR- you can set a refreshPriority on them instead so that you can make sure things get refreshed in the proper order. I added a ScrollTrigger.sort() at the end in order to force them to get ordered by their start position: 

See the Pen XWQRmmb?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Also, this is not a good idea:

transform: "translateY(100%)"

It's much cleaner, faster, and more efficient to do this: 

yPercent: 100

Does that clear things up? 

[mikhael]

1 hour ago, GreenSock said:

I didn't have a lot of time to look at this, but it appears to me as though you were creating the ScrollTriggers in the wrong order. You should always create them in the order they appear on the page, -OR- you can set a refreshPriority on them instead so that you can make sure things get refreshed in the proper order. I added a ScrollTrigger.sort() at the end in order to force them to get ordered by their start position: 

 

 

 

Also, this is not a good idea:

transform: "translateY(100%)"

It's much cleaner, faster, and more efficient to do this: 

yPercent: 100

Does that clear things up? 

Yes, it helped, thank you very much, it turned out to be a simple solution, but can you also find out why this is not a good idea? I really like the library, I would like to understand the intricacies 🙏

[mvaneijgen]

transform is a lot of properties in one, so in your example what happens when you also want to animate scale? or translateX? You would have to merge them all in to one string and animating strings is not always the best idea. GSAP has exposed all the transforms and GSAP also does a lot of optimisations under the hood, so it is best to use the exposed properties for each transforms check the list here https://gsap.com/docs/v3/GSAP/CorePlugins/CSS?_highlight=transform#transforms

 

Hope it helps and happy tweening! 

 

 

[mikhael]

6 minutes ago, mvaneijgen said:

transform is a lot of properties in one, so in your example what happens when you also want to animate scale? or translateX? You would have to merge them all in to one string and animating strings is not always the best idea. GSAP has exposed all the transforms and GSAP also does a lot of optimisations under the hood, so it is best to use the exposed properties for each transforms check the list here https://gsap.com/docs/v3/GSAP/CorePlugins/CSS?_highlight=transform#transforms

 

Hope it helps and happy tweening! 

 

 

Thank you very much for your work! You are best ! 🌟🌟🌟🌟🌟