Jump to content
Search Community

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

Zhiyi Zeng test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!

2019-04-20_160221.png

 

 

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 ...

Mikel

 

 

  • 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

  • 2 years later...

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.
×
×
  • Create New...