Jump to content
Search Community

Using Greensock with Meteor

FingerPuk test
Moderator Tag

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

Hello.

 

I'm working on a Meteor app and have used the GSAP package - which uses 1.11.5. I am getting no errors but also no easing, the div jumps to location after the given ease time. My code:

 

TweenLite.to(teaCont, 1, {css:{"margin-top":"25%"}, ease:Linear.easeNone});

 

I know this is hard to debug as it's not sing the CDN as Meteor requires packages but surely even if the easing was not included TweenLite defaults to a default ease?

 

Any thoughts?

 

Cheers.

 

p.s. Please release a Meteor package officially - I'll happily contribute by buying the full thing again.

Link to comment
Share on other sites

Hello FingerPuk, and Welcome to the GreenSock Forums!

 

Are you using TweenMax or TweenLite script?

 

If using TweenLite, you will need to also include the CSSPlugin, since you are trying to animate CSS properties... and you will have to include the EasingPlugin if using a ease.

 

If you are using TweenMax Script .. TweenMax extends TweenLite and includes all the goodies like:

  • TweenLite
  • TimelineLite
  • TimelineMax
  • CSSPlugin
  • EasingPlugin

and so much more.. see the TweenMax Doc's

 

Also the latest GSAP version at this time is 1.11.8

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

You can grab the latest version by scrolling to the top of the page. In the left top of the sidebar click on get GSAP and select the JS flavor.. tehn from there you can cstomize your GSAP scripts code.

 

Does that help? :)

Link to comment
Share on other sites

Hello, sadly with Meteor you cannot use a CDN but must package external code in a specific way. I have included all plugins and linked them so they are available for use. I get no errors in the console but the item doesn't tween. However I have noticed that I'm moving all elements on a page instead of the specific one I target so there must be something bigger going on.

Link to comment
Share on other sites

As mentioned in the docs, you need to use the JavaScript-safe camelCase names. So "margin-top" is "marginTop". I suspect that's the problem. 

 

You don't NEED to wrap your css stuff in a css:{} object, although it's perfectly acceptable and actually provides a tiny speed boost. 

//BAD:
TweenLite.to(teaCont, 1, {css:{"margin-top":"25%"}, ease:Linear.easeNone});

//GOOD:
TweenLite.to(teaCont, 1, {css:{marginTop:"25%"}, ease:Linear.easeNone});

Does that resolve things for you? 

  • Like 3
Link to comment
Share on other sites

@FingerPuk,

To be able to load GSAP from CDN, you'll need to install the Meteor plugin called External File Loader.

 

Use:

mrt add external-file-loader 

to install the plugin.

 

Here is the method you'll need:

Method

  • loadJs(url, callback, timeoutDelay) - Load external JS from a url. Callback is called once the url has been loaded. TimeoutDelay is the delay before timeout, in ms. Callback and timeoutDelay are optional. The method returns a jQuery promise.

If you are using Iron router, it is best you load your external script on the waitOn() function to make sure they are loaded before the page loads.

If you are not using Iron-Router, you can load the GSAP CDN with external file loader in the Template.created() callback.

Template.Templatename.created = function() {
Meteor.Loader.loadJs("//cdnUrl");
}

I have personally created a local GSAP plugin for meteor that I use. I'll see if I could put up a free version of GSAP plugin up on Github.

 

I hope it helps,

 

Praney :)

  • Like 1
Link to comment
Share on other sites

  • 2 years later...

Hey guys... I am trying out Meteor and installed GSAP through Atmosphere... https://atmospherejs.com/infinitedg/gsap

 

I am trying this in my react component within meteor, but getting errors... I am sure I am selecting the node incorrectly.

 

Do you guys have an example of how to call the Tween on the component?

 

NOTE: I am very new to this meteor/react world

import React from 'react';

export default class Home extends React.Component {
  	
  	componentDidMount () {
  		var node = this.findDOMNode();

  		TweenMax.to(node, 2, {alpha:0})
  	},

  render() {
    return (
      <h1>Home</h1>
    );
  }
}

Thanks!

Link to comment
Share on other sites

Hey Captain,

 

Would you be willing to put a simple example up of a component and how you are calling the animation?

 

I got it working with this, but know the string ref is not best practice... callback is preferred?

import React from 'react';

export default class Home extends React.Component {
 
  componentDidMount() {
  	var home = this.refs.home;
  	TweenMax.to(home, 1, {alpha:0})
  }

  render() {
    return (
      <h1 ref="home">Home</h1>
    );
  }
} 

Got it working with the callback...

import React from 'react';

export default class Home extends React.Component {
 
  componentDidMount() {
  	TweenMax.to(this.home, 1, {x:200})
  }

  render() {
    return (
       <h1 ref={(ref) => this.home = ref}>Home</h1>
    );
  }
}

Thanks!

Link to comment
Share on other sites

Sure, this is kind of hard for me to strip down but I am pretty sure the following will work. Each component would be in its own separate file. Let me know how it fairs when you try it. The idea is that I loaded the timeline in the parent file, passed it in as a prop to the tweens component and then a separate component called controls which has the play, pause etc buttons. This all works great for me except getting a progress bar. If you can figure that part out definitely let me know:

http://greensock.com/forums/topic/14729-progress-not-working-with-timeline-lite-and-react/

 

export class DraggableObjects extends React.Component {
  componentDidMount(){
    this.props.timeline.from('#tweenId1', 2, {left: 100, opacity: 0});


  render(){
    return(
      <p id="tweenId1">Test Transition</p> //In Reality, I have a loop where I loop through all of my draggable objects and assign ids that I can refer to in the componentDidMount
    )
  }
}


export class Parent extends React.Component {
  render(){
    let timeline = new TimelineLite();
    return(
      <div>
        <DraggableObjects timeline={timeline} />
        <Controls timeline={timeline} />
      </div>
    )
  }
}

export Controls extends React.Component {
  play(event){
    event.preventDefault();
    this.props.timeline.play();
  }

  render(){
    return(
        <button onClick={this.play.bind(this)} id="play">play()</button>
    )
  }
}
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.
×
×
  • Create New...