NickToye

Cool. If anything it will improve my JavaScript. It's always been my weakest string in my bow, so I learn things and stick to them, rather than expanding. I just don't always have the time, but this will definitely help.

Good stuff. Glad I found this little forum.

Awesome thanks. Need to add this into my Bootstrap now.

Cool so MatchMedia is bundled with jQuery?

Codepen doesn't work there. It stays on Desktop.

Actually this doesn't work. $(function () { var controller; controller = new ScrollMagic(); var mobile_tween = new TimelineMax() .add(TweenMax.to("figure:nth-of-type(1) .info", 0.5, {opacity: "1"})) .add(TweenMax.to("figure:nth-of-type(1) .info h2", 0.3, {opacity: "1"})) .add(TweenMax.to("figure:nth-of-type(1) .info p", 0.3, {opacity: "1"})) .add(TweenMax.to("figure:nth-of-type(2) .info", 0.5, {opacity: "1"})) .add(TweenMax.to("figure:nth-of-type(2) .info h2", 0.3, {opacity: "1"})) .add(TweenMax.to("figure:nth-of-type(2) .info p", 0.3, {opacity: "1"})); var tablet_tween = new TimelineMax() .add(TweenMax.to("figure:nth-of-type(3) .info", 0.5, {opacity: "1"})) .add(TweenMax.to("figure:nth-of-type(3) .info h2", 0.3, {opacity: "1"})) .add(TweenMax.to("figure:nth-of-type(3) .info p", 0.3, {opacity: "1"})) .add(TweenMax.to("figure:nth-of-type(4) .info", 0.5, {opacity: "1"})) .add(TweenMax.to("figure:nth-of-type(4) .info h2", 0.3, {opacity: "1"})) .add(TweenMax.to("figure:nth-of-type(4) .info p", 0.3, {opacity: "1"})); // build scene if($('body').width() <= 400) { var scene = new ScrollScene({triggerElement: "#tweenTrigger"}) .setTween(mobile_tween) .addTo(controller); } else if($('body').width() >= 768 && $('body').width() <= 1024) { var scene = new ScrollScene({triggerElement: "#tweenTrigger"}) .setTween(tablet_tween) .addTo(controller); } else { TweenMax.killAll(); }; }); I can setup a CodePen to illustrate, but if I can get some tips based on that, it would be good.

Actually this worked. $(function () { var controller; controller = new ScrollMagic(); var mobile_tween = new TimelineMax() .add(TweenMax.to("figure:nth-of-type(1) .info", 0.5, {opacity: "1"})) .add(TweenMax.to("figure:nth-of-type(1) .info h2", 0.3, {opacity: "1"})) .add(TweenMax.to("figure:nth-of-type(1) .info p", 0.3, {opacity: "1"})) .add(TweenMax.to("figure:nth-of-type(2) .info", 0.5, {opacity: "1"})) .add(TweenMax.to("figure:nth-of-type(2) .info h2", 0.3, {opacity: "1"})) .add(TweenMax.to("figure:nth-of-type(2) .info p", 0.3, {opacity: "1"})); // build scene if($('body').width() <= 400) { var scene = new ScrollScene({triggerElement: "#tweenTrigger"}) .setTween(mobile_tween) .addTo(controller); } else { TweenMax.killAll(); }; }); But I still think I could probably make this more elegant.

Hi, I'm getting somewhere slowly with all this, but my client is now asking for the same content to be animated differently depending on the device. So I did a little research and thought this would work: $(function () { var controller; controller = new ScrollMagic(); var mobile_tween = new TimelineMax() .add(TweenMax.to("figure:nth-of-type(1) .info", 0.5, {opacity: "1"})) .add(TweenMax.to("figure:nth-of-type(1) .info h2", 0.3, {opacity: "1"})) .add(TweenMax.to("figure:nth-of-type(1) .info p", 0.3, {opacity: "1"})) .add(TweenMax.to("figure:nth-of-type(2) .info", 0.5, {opacity: "1"})) .add(TweenMax.to("figure:nth-of-type(2) .info h2", 0.3, {opacity: "1"})) .add(TweenMax.to("figure:nth-of-type(2) .info p", 0.3, {opacity: "1"})); // build scene if($('body').width() <= 400) { var scene = new ScrollScene({triggerElement: "#tweenTrigger"}) .setTween(mobile_tween) .addTo(controller); }; }); However, the tweening animation is being triggered on both desktop and tablet. Any ideas what I've done wrong? Also is there anyway I can drop in a For loop to increment the figure child number?

Scrap all that, got myself in the deepend with that ScrollMagic. Good call.

I added this code: $(window).scroll(function (e) { var $top = $(window).scrollTop(200); // how many pixels scrolled from top }); and it wouldn't scroll at all.

I don't need complex. It just needs to fade in using opacity transition. But for desktop it behaves as a normal hover state, so I can't really use the TweenLite can I? Don't I need to apply a class? Mind you that wouldn't do the animation would it?

Hi, I'm looking for some functionality which will allow me to fade in content when I scroll past it on the tablet and mobile devices. I already use this plugin TweenLite but I'll be honest I don't have a clue what I am doing, this animation stuff is all new to me. Can anyone point me in the direction of an example of how I can do this? Nick