Jump to content

Zhiyi Zeng

How to clamp shapes like the color block in the middle container?

Recommended Posts

Hi, I'm new here. I'm trying to figure out how to realize what's in the link rallyinteractive. However, I have some troubles in clamping the color block in the middle. Any help would be appreciated.


Link to comment
Share on other sites

Sorry, I have no idea what element you mean or how this relates to GreenSock.


GSAP is an animation engine. It animates values. All rendering is done by the browser. If JavaScript can touch it, GSAP can animate it. It doesn't care what type of elements make up your design — DOM, SVG, canvas — it works with anything.


If you have a GSAP specific question, we're happy to help and providing a demo with your question is always helpful. Thanks.

  • Like 1
Link to comment
Share on other sites

Sorry, but I failed to upload screenshots.


It's the color lines that change colors every time I click the letters in the left. For example, when letter "T" is clicked, the color line would turn red and move from below screen to middle. It's one of the Official Examples in the website. I know how to change the color, but I'm not quite sure how to clamp the color block shapes every time another letter is clicked and how the lines are squeezed and extended.  I assume it's about GSAP animation, right? 


Thanks for the reply!




Link to comment
Share on other sites

Hi @Zhiyi Zeng


Welcome to the GreenSock Forum.


My skills in origami art (the folding of the ribbon) are limited. In addition, the ribbon is built here as a canvas element - not my specialty - and very cool animated.


Here only a weakened version on foot. The animations are done by changing the slides.


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



Happy tweening ...




  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Thank you!@mikel


I guess got the gist. My understanding is that basically, using Tweemax to change svg points and using yoyo animation in the outside container should do the trick. 


I made a rough version, inspired by your work. Here is the link http://zengzhiyi1234.xyz/alphabets_scroll.wmv . Sorry, no luck on codepen? temporarily.


Thank you again?

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.