Meteor.js + ScrollMagic TweenMax.to

Question

Trying to get the Meteor.rendered template for ScrollMagic is the code I want to make it work.

if (Meteor.isClient) { Meteor.startup(function () { scrollMagicController = new ScrollMagic(); Template.StartAnimation.onRendered({ // Create Animation for 0.5s animation: function () { var tween = TweenMax.to($('#animation'), 0.5, { backgroundColor: 'rgb(255, 39, 46)', scale: 5, rotation: 360 }) } }); })} 

Pkg Dependency hipstersmoothie: scrollmagic 0.0.9

This is based on a tutorial made by scotch.io . and the first part of codepen code

An attempt to recreate magic in a meteor. I would appreciate it if someone could take a look at these codes.

Thanks.

----------------------------------------------- --- -----------------------------

Found another solution, citing Using greensocks with meteor

 if (Meteor.isClient) { Meteor.startup(function () { scrollMagicController = new ScrollMagic(); $(document).ready(function () { // Create Animation for 0.5s var tween = $(".animation"); TweenMax.to(tween, 0.5, { backgroundColor: 'rgb(255, 39, 46)', scale: 5, rotation: 360 }); }); 

What works!! Nevertheless, I am considering how to use it correctly with flame ... At the same time, I will try to finish the code for the tutorial.

Answer 1

Try the following:

  Template.StartAnimation.onRendered(function() { // use this.$() to have jquery only search the dom in the current template scope var $e = this.$('#animation'); var transforms = { backgroundColor: 'rgb(255, 39, 46)', scale: 5, rotation: 360 }; var tween = TweenMax.to($e, 0.5, transforms) }); 

Answer 2

I do not think this is:

 Template.StartAnimation.onRendered({....}); 

updated.

I use the following for things that should happen when a template is rendered. It looks like your $ (document) .ready (function () {...}); but it only runs for this particular template.

 Template.StartAnimation.rendered = function(){ //your code goes here }