Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
DoPhuongAnh

Make text animation circle when scroll

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

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

  • Like 7
Link to comment
Share on other sites

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 ❤️

Link to comment
Share on other sites

 

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

 

 

  • Like 7
Link to comment
Share on other sites

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 ❤️

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×