Jump to content
GreenSock

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

Meteor animating template loads/redirects

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

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

Link to comment
Share on other sites

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 */
}

:)

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