celopez16

Thank you so much PointC I'm learning everyday!

how do i spin a round object forever and without interruptions? i want to animate this the wheel of this svg <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 175 175" enable-background="new 0 0 175 175" xml:space="preserve"> <g> <g> <g> <g> <g> <g> <path fill-rule="evenodd" clip-rule="evenodd" fill="#C97926" d="M62.897,76.102c-8.278-4.093-22.765-1.364-22.765-1.364 c-6.208,17.736,1.379,43.659,1.379,43.659c9.658,7.503,24.145,2.729,24.145,2.729C60.828,106.8,62.897,76.102,62.897,76.102 L62.897,76.102z M130.502,88.381c1.379-5.457-4.829-6.14-4.829-6.14c4.829,0,4.829-6.14,4.829-6.14 c-2.069-13.643-15.177-7.503-23.454-9.55c-8.279-1.364-4.83-7.504-4.83-7.504c11.038-6.14,13.797-15.007,13.797-15.007 c4.829-17.737-5.519-14.326-5.519-14.326c-2.069,4.775-19.315,21.83-26.904,25.923c-8.968,6.139-16.556,20.465-16.556,20.465 c-2.76,16.372,2.759,44.341,2.759,44.341c18.625,10.915,42.08,6.822,42.08,6.822c9.658-2.047,11.038-8.868,11.038-8.868 c1.379-5.457-2.761-6.14-2.761-6.14c6.899,0.683,7.59-7.504,7.59-7.504c2.068-6.822-2.76-8.186-2.76-8.186 C129.812,97.249,130.502,88.381,130.502,88.381L130.502,88.381z"/> </g> </g> </g> </g> <g id="rota_icono1" class="rueda"> <g> <path fill="#C97926" d="M150.405,34.618c-2.793,2.785-7.316,2.785-10.108,0c-2.791-2.787-2.791-7.302,0-10.088 c2.792-2.785,7.315-2.785,10.107,0.001l-0.777,0.775l-0.777,0.775c-1.936-1.923-5.062-1.924-6.998,0 c-1.929,1.933-1.929,5.053,0,6.984c1.937,1.925,5.063,1.925,6.998,0c1.929-1.931,1.929-5.051,0-6.984l0.777-0.775l0.777-0.775 C153.195,27.316,153.194,31.831,150.405,34.618z"/> </g> <g> <path fill="#C97926" d="M11.854,62.606c-0.232-0.362-0.499-0.708-0.816-1.024c-0.217-0.216-0.458-0.392-0.698-0.569 L60.68,10.742c0.181,0.246,0.362,0.492,0.584,0.714c0.312,0.311,0.65,0.575,1.006,0.803L11.854,62.606z"/> </g> <g> <path fill="#C97926" d="M165.397,103.689l-18.472-68.79c0.731-0.063,1.445-0.257,2.119-0.585l18.502,68.899 C166.812,103.241,166.084,103.395,165.397,103.689z"/> </g> <g> <path fill="#C97926" d="M71.043,9.653c0.307-0.682,0.474-1.403,0.514-2.135l69.516,18.6c-0.349,0.664-0.567,1.371-0.652,2.098 L71.043,9.653z"/> </g> <g> <path fill="#C97926" d="M113.978,164.474c-0.205-0.299-0.433-0.589-0.698-0.854c-0.267-0.266-0.557-0.491-0.855-0.697 l50.387-50.276c0.205,0.296,0.43,0.584,0.694,0.848c0.269,0.268,0.561,0.496,0.862,0.702L113.978,164.474z"/> </g> <g> <path fill="#C97926" d="M25.892,140.926L7.336,71.83c0.731-0.069,1.443-0.27,2.114-0.604l18.509,68.92 C27.237,140.271,26.539,140.537,25.892,140.926z"/> </g> <g> <path fill="#C97926" d="M34.249,149.027c0.368-0.656,0.609-1.357,0.714-2.082l68.603,18.352 c-0.323,0.675-0.509,1.391-0.566,2.12L34.249,149.027z"/> </g> <g> <path fill="#C97926" d="M114.057,172.154c-2.793,2.786-7.316,2.785-10.107,0s-2.792-7.3,0-10.087 c2.791-2.785,7.314-2.785,10.107,0l-0.777,0.777l-0.778,0.774c-1.935-1.924-5.062-1.924-6.997,0 c-1.928,1.932-1.928,5.052,0,6.983c1.936,1.925,5.063,1.925,6.997,0c1.929-1.932,1.929-5.052,0-6.983l0.778-0.774l0.777-0.777 C116.847,164.854,116.847,169.369,114.057,172.154z"/> </g> <g> <path fill="#C97926" d="M172.368,113.959c-2.791,2.785-7.315,2.785-10.107,0c-2.79-2.786-2.791-7.302,0-10.088 c2.792-2.785,7.316-2.785,10.108,0l-0.777,0.776l-0.777,0.776c-1.937-1.926-5.063-1.926-6.998,0 c-1.929,1.931-1.929,5.052,0,6.982c1.935,1.925,5.062,1.925,6.998,0c1.928-1.932,1.928-5.052,0-6.982l0.777-0.776l0.777-0.776 C175.16,106.657,175.16,111.173,172.368,113.959z"/> </g> <g> <path fill="#C97926" d="M35.918,149.264c-2.792,2.786-7.316,2.786-10.107,0c-2.791-2.786-2.791-7.3,0-10.087 c2.792-2.785,7.315-2.785,10.107,0.001l-0.777,0.775l-0.777,0.775c-1.936-1.925-5.063-1.925-6.998,0 c-1.929,1.933-1.929,5.053,0,6.983c1.936,1.925,5.062,1.926,6.998,0c1.928-1.931,1.928-5.052,0-6.983l0.777-0.775l0.777-0.775 C38.709,141.964,38.709,146.478,35.918,149.264z"/> </g> <g> <path fill="#C97926" d="M12.594,70.893c-2.792,2.785-7.316,2.785-10.108,0c-2.791-2.787-2.791-7.301,0-10.087 c2.792-2.786,7.315-2.786,10.107,0l-0.778,0.776l-0.777,0.776c-1.935-1.924-5.062-1.924-6.998,0 c-1.929,1.931-1.929,5.052,0,6.983c1.936,1.925,5.063,1.924,6.998,0c1.928-1.932,1.928-5.052,0-6.983l0.777-0.776l0.778-0.776 C15.384,63.592,15.384,68.106,12.594,70.893z"/> </g> <g> <path fill="#C97926" d="M70.905,12.697c-2.792,2.785-7.315,2.785-10.107,0c-2.791-2.787-2.791-7.3,0-10.087 c2.792-2.786,7.316-2.786,10.107,0l-0.777,0.775L69.35,4.162c-1.935-1.925-5.062-1.925-6.997,0 c-1.928,1.932-1.928,5.052,0,6.983c1.935,1.925,5.062,1.925,6.997,0c1.929-1.932,1.929-5.052,0-6.983l0.778-0.777l0.777-0.775 C73.697,5.396,73.696,9.91,70.905,12.697z"/> </g> </g> </g> </g> </svg> If i use timelinemax and the property rotation, it first changes the position of the element, then rotates, stop por a sec and rotates again, i want it to rotate forever withouy pause, hpw can i do that? Thanks

Thanks PointC and Carl, is really simple y have a draggable element, like the zoom of google maps, I detect if the user is zooming in or zooming out, sp I use the getDirection() method, the funny thing is, for example if you have a counter in the onDrag event, the counter will end up with a low number, say (10) if you drag fast, but if you drag slow, the number may be 50, I hope it's clear (i dont know mucho about codepen) Thanks!: Draggable.create("#eldrag",{ type: "y", bounds: $("#labarra"), onClick:function() { }, onDragEnd:function() { /*if(direccion=="up") TweenMax.to("#elscroll img", 0.3, {width:"200%"}); else TweenMax.to("#elscroll img", 0.3, {width:"70%"});*/ }, onDrag:function(){ w_contenedor=$('#zoom_photo').width(); porcent=($('#elscroll img').width() / w_contenedor) * 100 porcent=Math.ceil(porcent); direccion=this.getDirection("velocity"); if(direccion=="up"){ if(porcent<200) TweenMax.to("#elscroll img", 0.1, {width:( $('#elscroll img').width()+30 )}); }else{ if(porcent>=70) TweenMax.to("#elscroll img", 0.1, {width:( $('#elscroll img').width()-30 )}); } } });

PointC I'd like to talk about another question, something a little bit weird, if you drag an element and you drag it fast, the actions that you execute in the "onDrag" event for example, behave different than if you drag slowly. I have a site where i use Draggable to zoom in or out a photo, in the event "onDrag" I increase the size depending on the direction of the element, but i notice that when I move it really fast, the size is smaller, but if I drag slowly, the image increases more. What could be going on here? Thanks

PointC Thank you!!

Hi, I'd like to know how to detect if i'm dragging up or down, do you know if there's a way to do it? Thanks