Jump to content
Search Community

DoPhuongAnh

Members

  • Posts

    3

  • Joined

  • Last visited

 Content Type 

Posts posted by DoPhuongAnh

    Make text animation circle when scroll

    in GSAP

    Posted

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

×
×
  • Create New...