Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by chalkytannins

  1. 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.



  2. 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, 

    var controller = new ScrollMagic.Controller({
                globalSceneOptions: {
                    triggerHook: "onCenter"
    new ScrollMagic.Scene({
                    triggerElement: "#yourImageIDorContainer",
                .setTween("#yourImageIDorContainer", 0.8, {
                    x: "-500",
                    ease: Power2.easeOut

    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

    .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:




    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.



    • Like 1
  3. 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.

  4. 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?



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

  5. 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').css({"width": "80%", "padding": "3% 5%"});
    Thanks so much.