Meteor.js + ScrollMagic TweenMax.to

Question

Trying to get Meteor template.rendered working for ScrollMagic this is the code i wish to get it working.

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 the code codepen

Trying to recreate the magic in meteor. I'll be grateful if someone could have a look at these codes.

Thank you.

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

Found another solution by referencing 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
            });
    });

Which works !! Still I ponder on how to use it properly with blaze... In the mean time, i will try to finish the code for the tutorial.

Answer 1

Try this:

 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 don't think that this:

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

is up to date.

I use the following for things that should happen, when template is rendered. It's similar to your $(document).ready(function(){...}); but it triggers only for this specific template.

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