[GSAP and scrollmagic confusion]

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

[GSAP and scrollmagic confusion]

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

[Tweening to a progress of an animation and back.]

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.

 

See the Pen WpmXjw by chalkytannins (@chalkytannins) on CodePen

 

 

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.

[Tweening to a progress of an animation and back.]

I've been playing with the morphsvg bow and arrow demo:

 

 

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.

See the Pen epZyEK?editors=0010 by chrisgannon (@chrisgannon) on CodePen

[How to Trigger from a JS-validate?]

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.