Jump to content
Search Community

Fahim

Members

  • Posts

    22

  • Joined

  • Last visited

 Content Type 

Posts posted by Fahim

    jQurery .stop in greensock

    in GSAP

    Posted

    Hi

     

    Again i have a problem and i need help.

     

    I have written a code to animate svg on hover and it does so also but the problem is when i quickly hover again and again it redraws and looks broken i looked in jquery they have something .stop(true, false) with .animate but which cant be used as i am using greensock and it works differently so i tried with pause but its just pauses the animation.

     

    I have looked in forum and found this but i am not sure how can i +=20 with SVG

    http://greensock.com/forums/topic/8786-equivalent-of-jquery-stop/

     

    I hope i have created a proper codepen this time.

     

    Thanks,

    Fahim

    See the Pen gaKjwp by osricmacon (@osricmacon) on CodePen

    Greensock Animation Repeat not working properly in loop

    in GSAP

    Posted

    See the Pen medLwK by osricmacon (@osricmacon) on CodePen

     

    The above pen is update to exact my code.

     

    I messed up the class because i was using for click and hover which works fine.

     

    I am also using scrollto plugin of yours.

     

    The stupid and annoying for me is i can see everything fine on local but it dies on codepen

     

    The above pen works for first svg but dies for others

     

    Really guys thank you i have never seen such a helpful support team specifically for a new person like me.

    Greensock Animation Repeat not working properly in loop

    in GSAP

    Posted

    Hi

     

    I have written a simple code where it picks up data attributes values and does the animation with scrollmagic in a loop.

     

    It animate all the path of a particular svg.

     

    The problem happens when i am trying to add repeat and repeat delay just in case if the the user wants the animation to repeated. It does repeat but seems there is some problem. console log is also giving some message which i am not able to understand.

     

    I intend to write a small script which does animation in syn and asyn manner for all the path based a class.

     

    I am not where i am messing

    here is code and working url. i am not able to create codepen because there is no cdn for drawsvg plugin

     

    if (jQuery(".theo-svg-gsapscroll-s").length > 0) {
        jQuery(".theo-svg-gsapscroll-s").each(function () {
          var svgDiv = jQuery(this),
            mtl = new TimelineMax({            
                repeat: svgDiv.attr('data-t-repeat') || 0,
                repeatDelay: svgDiv.attr('data-t-repeat-delay') || 0
                });
                console.log(svgDiv.attr('data-t-repeat'));
          svgDiv.children('svg').find("path.svganimscroll, rect.svganimscroll, circle.svganimscroll, line.svganimscroll, ellipse.svganimscroll, polyline.svganimscroll, polygone.svganimscroll").each(function (index) {
            var svgPathtoAnimate = this,
              controller = new ScrollMagic.Controller(),
              tweenSvg = new TimelineMax()
                .add(mtl.from(svgPathtoAnimate, jQuery(this).parents(".theo-svg-gsapscroll-s").attr('data-t-duration') || 0.5, {
                  drawSVG: "100% 100%",
                  x: jQuery(this).parents(".theo-svg-gsapscroll-s").attr('data-t-x'),
                  scale: jQuery(this).parents(".theo-svg-gsapscroll-s").attr('data-t-scale'),
                  y: jQuery(this).parents(".theo-svg-gsapscroll-s").attr('data-t-y'),
                  rotation: jQuery(this).parents(".theo-svg-gsapscroll-s").attr('data-t-rotation'),
                  ease: jQuery(this).parents(".theo-svg-gsapscroll-s").attr('data-t-ease') || "Linear.ease"
                }));
            //console.log("svgPathtoAnimate " + svgPathtoAnimate + "  index " + [index]);
            var scene = new ScrollMagic.Scene({
                triggerElement: svgPathtoAnimate,
                triggerHook: 'onEnter'
              })
                .setTween(mtl)
                .addTo(controller)
                .addIndicators();
          });
        });
      }
        if (jQuery(".theo-svg-gsapscroll-a").length > 0) {
        jQuery(".theo-svg-gsapscroll-a").children('svg').find("path.svganimscroll, rect.svganimscroll, circle.svganimscroll, line.svganimscroll, ellipse.svganimscroll, polyline.svganimscroll, polygone.svganimscroll").each(function() {
          var svgPathtoAnimate = this;
          var controller = new ScrollMagic.Controller();
          var tweenSvg = new TimelineMax({
                repeat: jQuery(this).parents(".theo-svg-gsapscroll-a").attr('data-t-repeat') || 0,
                repeatDelay: jQuery(this).parents(".theo-svg-gsapscroll-a").attr('data-t-repeat-delay') || 0
            })
            .from(svgPathtoAnimate, jQuery(this).parents(".theo-svg-gsapscroll-a").attr('data-t-duration') || 0.5, {
              drawSVG: "100% 100%",
              x: jQuery(this).parents(".theo-svg-gsapscroll-a").attr('data-t-x') || 0,
              scale: jQuery(this).parents(".theo-svg-gsapscroll-a").attr('data-t-scale') || 0,
              y: jQuery(this).parents(".theo-svg-gsapscroll-a").attr('data-t-y') || 0,
              rotation: jQuery(this).parents(".theo-svg-gsapscroll-a").attr('data-t-rotation') || 0,
              ease: jQuery(this).parents(".theo-svg-gsapscroll-a").attr('data-t-ease') || "Linear.ease"
            });

          var scene = new ScrollMagic.Scene({
              triggerElement: svgPathtoAnimate,
              triggerHook: 'onEnter'
            })
            .setTween(tweenSvg)
            .addTo(controller)
            .addIndicators();
        });
      }

     

     

    See the Pen by theo-h (@theo-h) on CodePen

    Attrplugin

    in GSAP

    Posted

    As of now i am just trying to learn javascript and then a bit GSAP. SVG and canvas is all above my brain level as of now. But i know data-attribute will play a good role in what i will be making. It helps to make the element more powerful by storing associate values it can be css properties or animation properties. Sometime you want a store css properties so that you can use them in .set() and sometimes .to(), from(), fromTo(). I just trying to figure things out so that i can really understand GSAP and JS. Got some information its real valuable but still need a bit of more clarity. 

    Attrplugin

    in GSAP

    Posted

    Hi Jonathan,

     

    This example makes sense.

     

    can i also use something like setting these below attributes and get the element animate using the attributes via AttrPlugin.

     

    data-ca-bgsize="100% 100%"
    data-ca-move="left"
    data-ca-rows="20"
    data-ca-columns="20"
    data-ca-bgposition="0 0"
    data-ca-bgrepeat="no-repeat"

    get progress of a child timeline and master timeline

    in GSAP

    Posted

    Hi Carl,

     

    I am still stuck and asking silly question.

     

    i have used one of your code pen and tried playing with it. My situation is i have to use mastertimeline.add function and it will be used in loop and all the tween will be added to mastertimline in sequence then i will see what i will do for position parameter. basically i will using .set to unhide then will tween then again hide. i have written the whole program but its a mess.. 

     

    To replicate something similar i have used this pen.

     

    This doesnt works

      function box1() {
      masterTimeline.add(TweenMax.to("#box1", 1, {rotation: 360}).to("#box1", 1, {opacity: 0}));
      masterTimeline.add(TweenMax.to("#box2", 1, {top: 100}).to("#box2", 1, {opacity: 0}));
      masterTimeline.add(TweenMax.to("#box3", 1, {rotation: -360}).to("#box3", 1, {opacity: 0}));
      }
    this also works but only for box1
      function box1() {
        masterTimeline.add(TweenMax.to("#box1", 1, {rotation: 360}).to("#box1", 1, {opacity: 0}).to("#box2", 1, {top: 100}).to("#box2", 1, {opacity: 0}).to("#box3", 1, {rotation: -360}).to("#box3", 1, {opacity: 0}));
      }
     
    The progress bar also starts from middle.
     
    code pen is here 

    See the Pen ofJsm by osricmacon (@osricmacon) on CodePen

    onStart of timeline can i pass a function which has return parameter

    in GSAP

    Posted

    Hi Team,

     

    onStart of timeline can i pass a function which returns an array of divs which will be tweened.

    i see some good examples of calling onStart function with parameters but don't know how to handle the return and loop it in timeline so that each can be tweened. 

    I don't know if i am making sense at all or not. i hope i haven't asked too many silly questions.

     

     

     

    See the Pen aKrhj by osricmacon (@osricmacon) on CodePen

    get progress of a child timeline and master timeline

    in GSAP

    Posted

    I have seen an awesome nesting of timeline by carl in the mentioned code pen 

     

    if some one can add a progress to it then it will great.

     

    a 5px div in height and and say 200px width is filled with colour when the timeline progress

     

    i would like to see separate for child timeline and master time line.

     

    i have seen many jqueryui example and dragrable ones also but don't see any simple  js example which uses tween.set to fill a div with colour with timeline onUpdate 

    See the Pen symha by GreenSock (@GreenSock) on CodePen

    image spliting

    in GSAP

    Posted · Edited by Fahim

    I have written it. Yes its a JS and css thing and nothing to do with GSAP.

     

    See the Pen oseBG by osricmacon (@osricmacon) on CodePen

     

    https://gist.github.com/osricmacon/a2874800172d3d29b294

     

    see the above code pen if anyone is still interested.

     

    I have updated the code pen and its more awesome with background-position getting calculated in %. The splitting is also responsive.

    Now it can be used for animation

    • Like 1
×
×
  • Create New...