Make text animation circle when scroll

[DoPhuongAnh]

Hi guys,

I'm trying to make this text animation like this page: 

https://s.muz.li/MGI3NjRkZjJl

 

Every single scroll and this text in circle will scroll too. But I don't have any idea how do make this. How to trigger scroll slide, and every slide change, text in circle scroll. Sorry for my bad English and thank you all for read topic ❤️

See the Pen GRZOoJa by lenasta92579651 (@lenasta92579651) on CodePen

[ZachSaucier]

Hey DoPhuongAnh and welcome to the GreenSock forums.

 

Here's how I'd break down this effect:

• Position all of the text, one after another, around a circle. You've already done most of this! The text will overlap at this point.
• Select all of the parts of the text for each segment (in the case of the site you linked that means each person's name). Store this for reference.
• Keep a reference of which part is currently active.
• Whenever the active segment changes, rotate the circle so that the active one is where you want it. Also animate the transparency of all of the segments that are off screen to 0. Animate the transparency of the segments next to the active one to a value like 0.7 or so. Animate the transparency of the active segment to 1.

Hopefully that will help you get a bit further than where you are now  

[DoPhuongAnh]

11 hours ago, ZachSaucier said:

Hey DoPhuongAnh and welcome to the GreenSock forums.

 

Here's how I'd break down this effect:

• Position all of the text, one after another, around a circle. You've already done most of this! The text will overlap at this point.
• Select all of the parts of the text for each segment (in the case of the site you linked that means each person's name). Store this for reference.
• Keep a reference of which part is currently active.
• Whenever the active segment changes, rotate the circle so that the active one is where you want it. Also animate the transparency of all of the segments that are off screen to 0. Animate the transparency of the segments next to the active one to a value like 0.7 or so. Animate the transparency of the active segment to 1.

Hopefully that will help you get a bit further than where you are now  

Thanks you for your solution ❤️

[mikel]

 

Hey DoPhuongAnh,

 

Welcome to the GreenSock Forum.

It's a lot of fun: a color 'kaleidoscope'.

 

See the Pen powWwMm by mikeK (@mikeK) on CodePen

 

Happy scrolling ...

Mikel

 

 

[DoPhuongAnh]

16 minutes ago, mikel said:

 

Hey DoPhuongAnh,

 

Welcome to the GreenSock Forum.

It's a lot of fun: a color 'kaleidoscope'.

 

 

 

 

Happy scrolling ...

Mikel

 

 

You so briliant, mikel ❤️