Jump to content
Search Community

evomedia.lt

Premium

  • Posts

    42

  • Joined

  • Last visited

 Content Type 

Everything posted by evomedia.lt

1
2
Page 2 of 2  
  1. evomedia.lt
    Here's a gif to illustrate drag and click... The clicks/taps on the links don't always work on mobile chrome, and I don't understand why. Hope this clears it up a little.
  2. evomedia.lt
    Hello Zach. Dragging is so that the entirety of projects menu could be accessible on smaller screens, so when the window is narrow you can drag it up/down to reach desired option then tap/click on it to get to the project on the right. The issue is clicking/tapping on the links. They not always work on android chrome.
  3. evomedia.lt
    Hello, I've created a projects slider with interactive draggable projects menu. The snipped runs bi-directionally - if you scroll through projects it uses scrollTrigger to update the projects menu, and in reverse - if you click items in the menu, it scrolls the website to the chosen project. The problem is with the draggable projects menu, it works great on desktop and on android firefox, however in Android Chrome and on native Samsung Browser the links don't always work. It changes colour, as if the hover event fired, however touch/click doesn't register. I've tried adding Draggable setting of minimumMovement up to 20, but it doesn't help, and once I touch the link it visibly moves a few pixels so it seems like the dragging overpowers the click/tap. Please check out the codepen example in Android Chrome in landscape mode. (Sorry for the messy code, it had to be extracted from a bigger code). Thank you in advance
  4. evomedia.lt
    Thank you both, I'll try doing it with inputs
  5. evomedia.lt
    Oh, my bad. Though that I was messing around with the forked one . It behaves like it should if i change the progress with onDragEnd or onRelease listeners. It just really doesn't like it when i try to use onDrag.
  6. evomedia.lt
    Hi, i'm trying to make alternative drag gable navigation element , that would scroll the page by dragging it up and down. So i have ran into 2 problems one is the moment you start to drag it jumps to the bounds top/bottom bounds of y axis instantly. Secondly i wan't to animate it, when you scroll the page normally, but that that brakes brakes everything also. Any help/tricks/tips with this would be greatly appreciated.
  7. evomedia.lt
    Hi, how to make this text animation with GSAP? :) https://codepen.io/yemon/pen/dzgmxJ
  8. evomedia.lt
    @mikel Thanks for the help. Your example helped me finish.
  9. evomedia.lt
    I want to restart the current circle animation. Now pressing the button previous / next or changing the slide, restarts all circles
  10. evomedia.lt
    var slide = 1; var tl = new TimelineMax({repeat:1, yoyo:false}); $(".owl-carousel").each(function(){ tl.fromTo('.slide-nav.sn-'+slide+' .slide-loading .gold', 5, {drawSVG: "0%"}, {drawSVG: "100%"}, 0); $(this).owlCarousel({ .... }); $(document).on("click", ".slide-nav.sn-"+slide+" button", function () { tl.restart(); }); slide++; }); How to restart current object animation? tl.restart() restarts all objects animations. I have multiple carousels and everyone have svg object with animation.
  11. evomedia.lt
    Started with: var t2 = new TimelineMax(); t2.staggerTo('.letter', 0.2, {opacity: 1, visibility:'visible'}, 0.1); and ended animation with: var x2 = new TimelineMax(); x2.staggerFrom('.letter', 0.2, {opacity: 0, visibility:'hidden'} , -0.1); But visibility still remains of all elements.
  12. evomedia.lt
    Thank you for the workaround, OSUblake It does what I need.
  13. evomedia.lt
    It's a great example, thank you OSUblake. One more thing about svg that still wins over canvas for me is that it's a part of the DOM, not only every element can be styled and animated in real time by CSS, it also can be interacted with, and supports selectors like :hover. With canvas I would need to fall back to tracking coordinates of each item (unless I don't know something about Path2D approach). Back to my previous questions. Jack gave me this workaround: However, I noticed, it doesn't work as intended on tweens that have yoyo:true. I'd like to know if that's a bug or intended behaviour. Here's my codepen to illustrate:
  14. evomedia.lt
    I didn't know about this. Thank you, Jack! It works when the tween is one sided, as in it's a one time or a looped tween. However, if I do a yoyo:true, progress goes from 0 to 1, then back to 0, thus making this solution nonfunctional. What I mean is if I invalidate the tween on it's way back, instead of continuing with the animation it starts going forward again. I made a codepen example here: One sided progress (try changing window width when animation goes forward and then backward, you will see that when you change it on the way back, it jumps to forward animation). Maybe when yoyo is true, the progress should count to 0.5 when going forward and 0.5 to 1 when going back? Sahil, this is great stuff! However as you mentioned, Path2D isn't fully supported everywhere, specially still behind on mobile devices. Also, it goes back to using raster graphics where we have to worry about scalability, and I like how crispy svg vectors look on any display/size. Offtopic question: how do you embed a codepen in a forum reply?
  15. evomedia.lt
    This is awesome! It does what I want in general, even though you can still notice some drift from the center when the tween is restarting (when the line gets long again). Maybe because the line length changes on every frame (it's own tween), and TweenMax optimizes the frame updates for the svg somehow? Doesn't matter, this will be enough for what I need. Now for suggestions, I haven't tested it, but recalculating many objects lengths live should be using extra resources, and sometimes what you really need is change only when the browser window resizes. Maybe there could be a "onResize" along with "live" somehow? Or it could even be a default behaviour, because it is important for responsive aspect of dynamic svg graphics. So possible solution would be just to slap an onResize event listener any time drawSVG tween starts, and recalculate path length if it triggers... Maybe my case is an edge case, but I think animated SVG UI's is the future, and I'm trying to make it as dynamic and responsive as possible.
  16. evomedia.lt
    At this point I came up with a workaround, but I don't think it's a proper solution: Codepen example What I'm doing here is animating a control object with percentage values, and then using onUpdate call to set drawSVG at the given time. Don't know how efficient it is speed-wise, but I am certain this is a workaround and not a solution. What I mean is if I have one or ten objects it's passable, but if I have a hundred animating differently at a time it becomes hard to keep track. Also not all objects require path recalc on every frame, or none at all. I feel like there should be some sort of a flag in drawSVG for the tween to update path length on every frame or even an event callback to resize of the window, because that's when geometry usually tends to change. Maybe I'm thinking too hard about this... Any opinions?
  17. evomedia.lt
    Hello everyone! I'm trying to make a responsive website utilising svg animations, however I noticed, that when using drawSVG tweens, the length of a path gets only calculated once, during the initialization of a tween. My question: Is there a way to trigger path length recalculations during the drawSVG tween without stoping/restarting it. Attached to this thread is a codepen illustrating the problem. Top path is what it's supposed to look like (yellow path hitting the red dot on extremes), and lower path shows what I'm getting. Thank you in advance
1
2
Page 2 of 2  
×
×
  • Create New...