Fahim

Thank you Diaco

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

Its working fine as far as loop is concerned. The moment the svg has more than one path then it goes in some heavy looping. Seems my looping is flawed or something. I will mark it resolved and close this. Thanks Carl and Rodrigo for your time.

I have update the pen again and i can see the timeline is fine and tween's are getting added but the only problem which was original as well is that it doesnt repeat. Please help if someone has some spare time in his timeline.

its working and repeating also but in case if i have more than one path in svg then its does something weird

The codepen is working finally but its not repeating

http://codepen.io/os...acon/pen/medLwK 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.

Hi Carl and Rodrigo, Here is my codepen as reduce test case scenario but this is not working at all. http://codepen.io/osricmacon/pen/LpYmVW http://codepen.io/osricmacon/pen/medLwK Seems the code is not working at all. I don't know what else to do. If its solved thanks else also thanks. Thanks, Fahim

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(); }); }

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.

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"

Does attrPlugin has any thing do to with data-attributes ?

Never mind i got what i was looking i confused myself.

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 http://codepen.io/osricmacon/pen/ofJsm

Thanks Rodrigo, Your explanation make sense. My understanding is amplified. Fahim