Scrollmagic: Apply same scene to every element with same class

[CalebEverett]

Hi,

I have many instances of bold text in my document with <strong> tags that I put a class of .animated into. I'd like to have the text be normal until it gets to the middle of the window and then turn bold. I looked at the examples in 52 and 100, but couldn't get it working the right way.

var strongOrigin = {
    opacity: 0,
    scale: 0
}

var strongTween = TweenMax.staggerFrom($(this), 0.5, strongOrigin);

$('.animated').each(function(){
  var controller = new ScrollMagic();
  var strongScene = new ScrollScene({duration: 100,triggerElement: $(this),offset: -100})
      .setTween(strongTween)
      .addTo(controller);
});    

Thanks for taking a look.

[CalebEverett]

I got this sorted out via a prior support request someone else made on Greensock

$('strong').each(function(){
    var currentStrong = this;

    var tweenStrong = new TimelineMax()
        .to(currentStrong, 0.25, {css: {fontWeight: 400, textShadow:"0px 0px 20px rgba(18, 112, 200, 1)"}});

    var scene = new ScrollScene({triggerElement: currentStrong, offset: -$(window).height()*0.7})
        .setTween(tweenStrong)
        .addTo(controller);
});

[janpaepke]

Yes that is exactly how you would approach this. :)

The issue with your first code was, that in the animation you referred to $(this) outside of the each loop.