NickToye
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by NickToye
-
-
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.
- 1
-
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
Using Media Queries in TweenMax
in GSAP
Posted
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.