Help: Need Help In Doing These Series of Effects

[JonthueM]

What I am suppose to do is have this line at the center with of course a logo on top but the line move out even with the appearing line to reveal content and the lines move in into one causing the text to disappear and moving out again to cause a new text to be reviewed in the process. Please check link for assets and crystal clear instructions. The fade no biggie but the line and revealing content?!?!!

Here are the Assets

https://drive.google.com/drive/folders/1K4pev2iUqnlWh2uw-v1VAzGZgEIwuCVo?usp=sharing

[PointC]

Hi @JonthueM

 

Welcome to the forum.

 

You said: "What I am suppose to do is...". Is this a class assignment? 

 

There would be several ways to do the reveal. You could use a div and overflow: hidden. You could use a div (or two) the same color as the background and reveal the text by animating the y value. You could use a SVG and a clip-path or mask. Lots of possibilities. 

 

Here's a SVG demo from another thread which does something similar. Maybe it'll give you some ideas.

See the Pen MWwqrjO by PointC (@PointC) on CodePen

 

We're happy to help with specific GSAP questions or problems. It'll be best if you can provide demo with your question.

Good luck with your project. Let us know if you have any GSAP related questions.

 

Happy tweening and welcome aboard.

 

[JonthueM]

1 hour ago, PointC said:

Hi @JonthueM

 

Welcome to the forum.

 

You said: "What I am suppose to do is...". Is this a class assignment? 

 

There would be several ways to do the reveal. You could use a div and overflow: hidden. You could use a div (or two) the same color as the background and reveal the text by animating the y value. You could use a SVG and a clip-path or mask. Lots of possibilities. 

 

Here's a SVG demo from another thread which does something similar. Maybe it'll give you some ideas.

 

 

 

We're happy to help with specific GSAP questions or problems. It'll be best if you can provide demo with your question.

Good luck with your project. Let us know if you have any GSAP related questions.

 

Happy tweening and welcome aboard.

 

Not for school, for work!