Jump to content
Search Community

How to reveal text with ball rolling

dragon_89 test
Moderator Tag

Go to solution Solved by dragon_89,

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

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

:)

  • Like 2
Link to comment
Share on other sites

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.

:)

 

Link to comment
Share on other sites

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?

 

 

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