Search the Community
Showing results for tags 'hold'.
Found 5 results
SteppedEase - Hold & StepI am trying animate a SVG element where the element's position/pose is held for a duration and then snaps immediately to a new position/pose, and so on and so on. I have a working example using SteppedEase, but it feels a bit hacky - as it requires me to use an undocumented 'true' parameter (mentioned in: https://greensock.com/forums/topic/13388-steppedease-to-step-immediately) and duplicate the relevant SVG element's path data from the inline SVG image - with a slight modification (otherwise the duplicated path seems to be ignored). In the codepen example - the Red square should snap to align with the Green triangle as it passes the little blue squares (at 0s, 1s and 2s). When I tried using just steps(1) - it stepped once, but at 50% of the inter-blue-square duration (1s in this example). Whereas I need it to step once at 100% of that duration. So the overall behaviour would be more akin to using a series of Hold durations.
DrawSVG animation delay on every subsequent 'path'
alfianridwan posted a topic in GSAPHi everyone, I am trying to perform an animation with a delay on every subsequent SVG 'path'. In this Codepen link you can see that every letter of the SVG logo is separated by a 'path'. How do I perform a DrawSVG animation delay for each path, similar to how it looks like in here. This was animated using Anime.js, but sadly it couldn't control the animation using events as good as DrawSVG, but the delay of each letter was what I'm looking for. Is there a quick way to do this? Or would I have to manually delay every path by giving it IDs? Thanks
SVG Animation Play and Reverse on mouse/touch hold
long pressed and then drag does not work for touchHey, i first try to explain what i want to do: i have an vertical sortable list of items where each item should be draggable after item was long pressed. if no item was long pressed, the hole list of items should be scrollable (also scroll by touch on touch devices). I listen for mouse/touch/pointer long pressed, and then i create a new Draggable, and call startDrag(e) with the event i received from my lister. With Mouse Events, all is fine, but with Touch Events, i have the problem that a pointercancel event is called after 7 or 8 pixel dragging a element in one direction and the dragging abort. Please see my codepen, hold press and drag the red item. you have to use a touch device, or set force touch sensor in chrome devtools. Has someone an idea? Best Regards Chris
stop aniamtion for one element, and after some animation continue itI have a work that requires grouping elements in animation, and then taking it a part and so on... As for now i am creating separate images when images should work together, and then making a transition when they should be separated several images. So when I have several elements, I can wrap them into a div and it can work like group. But what if I have some animation set up, like in codepen, for now to save it I would need to hide the element that I need to move out of animation, create the same one on top of it, animate it, put it back, hide, show previously hidden one - done. Is there a better way? Can I switch of animation for some element, do another thing, and then continue previous animation?