bootstrap007

@mikel , 

That sounds great!

Thank you very much. ?

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

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

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

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

Thanks.

See the Pen by (@) on CodePen

14 hours ago, ZachSaucier said:

Hey bootstrap and welcome to the GreenSock forums.

 

As mikel pointed out, you can make use of an event listener to do this. If you want to reverse your timeline and then go to the next page, you should make use of the onReverseComplete callback that's built into GSAP:

 

 

 

 

P.S. Why not use the <nav> element for your navigation? It'd probably also make sense to put your logo and navigation into a <header> element. Maybe even get crazy and put your content in an <article>! Semantic HTML is a good thing  

This is exactly what i am looking for. Thanks a ton!  ?
Regarding your question - Actually I had posted this same question on Stackoverflow without any demo link and ppl started asking for a working demo.  Then I made this HTML in a hurry and this is only for a demo purpose. 

Thanks! ZachSaucier

16 hours ago, mikel said:

Hey @bootstrap007,

 

Welcome to the GreenSock Forum.

 

Try for example this code

 

 

 

 

Happy tweening ...

Mikel

 

 Thanks Mikel! 

 

Can anyone give me some reference or code for how to animate out each elements jquery function or only using gsap before moving to the next link/page?

I have created a HTML page with few elements like logo, one pic and one introduction paragraph. All these three elements animate and appear when the page loads and after this, when user click the next page I would like to have an effect like all these three elements animates out (reverse animation) and then moves to the next page.  Any help would be much appreciated.

I have created a demo below:

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