Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
bootstrap007

How to rotate the ball continuously while running the bouncing animation

Recommended Posts

Hi Everyone,

 

How to rotate the ball continuously while running the bouncing animation and at the end of the animation I am trying to "zoom in" the ball to the screen's 100% which is not happening as you can see in the CodePen which i have created. Kindly check the CodePen and hope anyone could help me with this.

See the Pen gObXeap by bootstrap007 (@bootstrap007) on CodePen

Share this post


Link to post
Share on other sites

Hey @bootstrap007,

 

try this

 

var wh = window.innerHeight;

tl.to('#ball', .50, { width:wh, ease: Power2.easeOut });

// and a separate tween
TweenMax.to('#ball', 2, {rotation:360, transformOrigin:'center', repeat:-1, ease: Linear.easeNone})

and please use the new gsap 3.0

 

Happy tweening ...

Mikel

  • Like 2

Share this post


Link to post
Share on other sites

Hi @mikel,

 

Thanks & really Appreciated. :)  

Just 2 concerns. Is there a way if I don't want to rotate the ball while "zoom in" in the end? Also is it possible to do this zoom in through an invisible path ?

 

Thanks in Advance

Share this post


Link to post
Share on other sites

Hey @bootstrap007,

 

To 'stop' a running tween: just pause it

 

var rotation = TweenMax.to('#ball', 2, {rotation:360, transformOrigin:'center', repeat:-1, ease: Linear.easeNone})

//Later a callback ...

tl.to('#ball', .50, { width:wh, ease: Power2.easeOut, onSart: stopRotation });

function stopRotation(){
  rotation.pause();
}

 

'to do this zoom in through an invisible path': what do you expect? Something like this animation?

 

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

 

Then study the MotionPathPlugin

 

Happy tweening ...

Mikel

 

And: Please use new, forked pens for changes.
So other users can see the initial situation,
and what has been changed.

 

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

Hi @mikel ,

 

Thank you very much. This is exactly what I am looking for. Really Appreciated for your time ???

 

Sure, I'll follow your instructions to create new forked pens for changes from now onwards. :)

 

That motion path plugin video link helps. Thank You.

 

Just one last and final concern : No need to use separate CDN files of TweenMax.min.js & TimelineMax.min.js In the new gsap 3.0 ? Shall we just use this one instead - <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.4/gsap.min.js"></script> ?

 

 

 

 

 

Share this post


Link to post
Share on other sites

Hey @bootstrap007,

 

You never need to reference TweenMax, TweenLite, TimelineMax or TimelineLite anymore because they're all simplified into a single gsap object! 

More migration info and 

 

 

Happy tweening ...

Mikel

 

  • Like 1

Share this post


Link to post
Share on other sites
On 1/3/2020 at 3:24 PM, bootstrap007 said:

How to rotate the ball continuously while running the bouncing animation

It looks like you solved this part already thanks to mikel.

 

On 1/3/2020 at 3:24 PM, bootstrap007 said:

at the end of the animation I am trying to "zoom in" the ball to the screen's 100% which is not happening

The main issue here is that you're setting the SVG's width based on the viewport's height, which doesn't make much sense. Another difficulty is the fact that you have extra space in the SVG around the ball. 

 

I recommend that you edit your SVG to be square and only large enough to contain the ball (with no extra space). Once you've done that, you can size the SVG as needed, move it around as needed, but when you want it to enlarge, all you have to do is this:

if(window.innerHeight < window.innerWidth) {
  tl.to('#ball', .50, { height:window.innerHeight, width:"auto", ease: Power2.easeOut });
} else {
  tl.to('#ball', .50, { width:window.innerWidth, height: "auto", ease: Power2.easeOut });
}

The above code will size the whole SVG, making sure it fits within the viewport by setting the width or height to the max of the smaller dimension. 

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×