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.