Meteor animating template loads/redirects

[SirBT]

Keeping in mind am using the Meteor framework...

Currently, when i click on a specific button on my page, it redirects/loads to the intended page being a template.

 

My desire is to use (timeLineLite() ) to animate  the intended page (template) by sliding it into the main page. 

Is this possible to do? If so kindly show me how to.

 

My codepen link where I indicate the issue is: 

 

Thanks in advance

See the Pen ORVyBq by SirBT (@SirBT) on CodePen

[Jonathan]

Hello SirBT, and Welcome to the GreenSock forum!

 

I am not seeing your pages rendered in the page. You also have no CSS defined for your pages.

 

GSAP can be used to animate any numerical object or property. As well as any DOM elements. That meteor templates final output will be HTML. So the end result is the same, being HTML DO But i would recommend that you only run your GSAP code, only when the DOM is ready and the window is fully loaded, to guarantee your animation only runs w

Thank you for the example, when i preview your codepen it does not include GSAP TweenMax.min.js. The latest version is 1.9.0 in the codepen JS panel. (click the gear icon next to the words JS)

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

Also keep in mind that when you animate using transforms.. in this case x (translateX). You should always have the CSS property position:relative or position:absolute. This way it can animate outside the flow of the document.

#WelcomeUser {
   position:relative; /* or this could be absolute */
}