How to rotate the ball continuously while running the bouncing animation

[bootstrap007]

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

[mikel]

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

[bootstrap007]

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

[mikel]

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.

 

[bootstrap007]

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

 

 

 

 

 

[mikel]

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

 

[bootstrap007]

@mikel , 

 

That sounds great!

 

Thank you very much. ?

[ZachSaucier]

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.