chalkytannins

It shouldn't negate them being responsive, they should still scale. You can add athe reverse:false flag var scene = new ScrollMagic.Scene({ triggerHook: "onEnter", reverse: false }); to prevent the animation from reversing when scrolling back up past the trigger point. I believe you can call whatever functions you'd like in your scroll scene, but i haven't attempted that yet. gluck

I'm also a bumbling html noob and found the documentation for scrollmagic is pretty poor, so i understand your pain. Just make sure you're loading the iscroll stuff properly, should be something like this in the head <script src="js/lib/greensock/TweenMax.min.js"></script> <script src="js/lib/greensock/plugins/ScrollToPlugin.min.js"></script> <script src="js/lib/jquery.min.js"></script> <script src="js/lib/modernizr.custom.min.js"></script> <script src="js/lib/iscroll-probe.js"></script> <script src="scrollmagic/minified/ScrollMagic.min.js"></script> <script src="scrollmagic/minified/plugins/animation.gsap.min.js"></script> <script src="scrollmagic/minified/plugins/debug.addIndicators.min.js"></script> then at the end before the closing body tag, <script> var controller = new ScrollMagic.Controller({ globalSceneOptions: { triggerHook: "onCenter" } }); new ScrollMagic.Scene({ triggerElement: "#yourImageIDorContainer", }) .setTween("#yourImageIDorContainer", 0.8, { x: "-500", ease: Power2.easeOut }) .addTo(controller); </script> where triggerHook:onCenter means 50% of viewport height is the trigger to start animation. You can also use onEnter (very bottom of viewport) and onLeave (very top). You can also offset by number of pixels from onCenter/onLeave/onEnter with offset: value eg. new ScrollMagic.Scene({ triggerElement: "#yourImageIDorContainer", offset: 150 }) .setTween("#yourImageIDorContainer", 0.8, { x: "-500", ease: Power2.easeOut }) .addTo(controller); .setTween is poorly documented, but it's a shorthand for TweenMax.to I believe. You can also declare your tween or timeline before hand as shown here: http://scrollmagic.io/docs/animation.GSAP.html#Scene.setTween I prefer doing it this way, so i can set the ending position of the element in the stylesheet and then TweenMax.from() rather than declaring the final position in the HTML, and setting the intial position in the stylesheet. Cheers

Here's sort of what I've been working towards, but I'm not sure how to execute it. I know it must be possible, and i'd much rather do it this way, rather than have to open Illustrator back up and slip in a keyframe to animate back and forth from. http://codepen.io/chalkytannins/pen/WpmXjw Initially I tried adding a onComplete function into my var archeryTl = new TimelineMax({onComplete:myFunc}); and then running myFunc to pass the TweenLite.to(archeryTl, 1, {progress:0.2, delay:2, ease:"Expo.easeOut", repeat:2,yoyo:true}); But I seem to be tripping up on how the timeline is handled. The end goal is to have the shaking fractional tween to repeat until some event fires to finish the animation and shoot the arrow. Thanks so much. Edit: Figured out I need TweenMax.to for the animations to repeat.

I've been playing with the morphsvg bow and arrow demo: http://codepen.io/chrisgannon/pen/epZyEK?editors=0010 I was trying to get a wiggle strain when the bow was fully pulled, and using CustomWiggle and rotation with easeInOut produced some cool results, but I was trying to get the Bow and string to relax part of the way back to the relaxed/straight state. Is there anyway to animate a wiggle ease in and out partway back through an animation? Thanks.

I'm trying to customize my Mailchimp validation Upon successful form validation, a 'thank you/almost finished' overlay is revealed with .show(), but i wanted to animate how it appears with GSAP. How can I call/trigger a GSAP animation from this mc-validate.js ? if (resp.result == "success"){ $('#mce-'+resp.result+'-response').show(); $('#mce-'+resp.result+'-response').css({"width": "80%", "padding": "3% 5%"}); $('#mc-embedded-subscribe-form').each(function(){ this.reset(); }); }); Thanks so much.