How to reveal text with ball rolling

[dragon_89]

Hi,

 

I am new to greensock and I need little help with it. I am trying to reveal few words (2-3 words in a line) as the ball rolls across the x-axis. Is there a way to do that?

In my code, the ball rolls till then end and then displays the text, but I want the text to be displayed as the ball moves across.

 

 

Codepen link:

 

See the Pen pROjra by anon (@anon) on CodePen.

 

See the Pen pROjra by anon (@anon) on CodePen.

 

 

Thanks

See the Pen VPGvLJ by anon (@anon) on CodePen.

[PointC]

Hi adi_89 

 

Welcome to the GreenSock forum.

 

I'm sure we can assist you, but we need a CodePen demo first. We couldn't give you an answer based on that description. Please see Carl's blog post for more information about creating a demo.

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Thanks and happy tweening.

 

PS I see you also posted this question in the Banner forum. Please just post a question in one forum. Thanks. (I'll remove the duplicate.)

[dragon_89]

I have provided the link.

 

See the Pen pROjra by anon (@anon) on CodePen.

 

let me know if you can help me in this.

 

Thanks

[PointC]

Thanks for the pen.

 

What you're looking for is called the position parameter. You can overlap tweens on the timeline or make them wait to start. The code can be written a few ways:

.from('#one .box1', 0.5, {opacity:0}, 1.5) // absolute time
.from('#one .box1', 0.5, {opacity:0}, "+=2") // relative time
.from('#one .box1', 0.5, {opacity:0}, yourLabel) // using a label

For more information, please see this post:

 

https://greensock.com/position-parameter

 

Happy tweening.

[dragon_89]

Thanks for your reply. It helped me a little.

In the example which you mentioned, all the three boxes are visible as the page loads and even they fade away. I don't want that, I want the words to be visible as the box moves across upto a certain width, without fading.

 

 

Thanks for the pen.

 

What you're looking for is called the position parameter. You can overlap tweens on the timeline or make them wait to start. The code can be written a few ways:

.from('#one .box1', 0.5, {opacity:0}, 1.5) // absolute time
.from('#one .box1', 0.5, {opacity:0}, "+=2") // relative time
.from('#one .box1', 0.5, {opacity:0}, yourLabel) // using a label

For more information, please see this post:

 

https://greensock.com/position-parameter

 

Happy tweening.

 

[PointC]

I'm not sure I completely understand, but your first post made it sound like you wanted each word to fade up after the box passes it. If that's what you need, please try this for your timeline:

var tl1 = new TimelineMax();
tl1
.to('#one .box', 2, {x:188})
.from('.box1', 0.5, {opacity:0}, 0.25)
.from('.box2', 0.75, {opacity:0}, 0.5)
.from('.box3', 0.75, {opacity:0}, 0.75);

Is that what you meant?

 

 

[dragon_89]

thanks.

 

It helped. I was able to solve it using your previous post. Thanks alot.