Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Everything posted by knalle

  1. Mikkel, the closing "look" is right, but my CodePen is simplified and the case of simply reversing isn't going to work - I need to have svg working in in 0.9.1 again. Perhaps there are new MorphSVG setting I need to fill in?
  2. I upgraded to latest MorphSVG (v. 0.9.1) - but now the SVG path closing animation is not working (the background should "scale" back in). What could be the problem? It works in 0.8.8.
  3. Ah yes, thatnk you. You are right I missed that! It happened with SVGOMG that optimized it "too much". A notice on this in the docs is better if the alternative is additional checks in convertToPath(), that has a negative impact on speed
  4. I just noticed that a <rect> with the rx attribute is not converted to a <path> with the same appearance. <rect x="90" y="115" width="228" height="206" rx="23"/> Well, it depends on how you look at it. I guess it is intended behavior from GSAP but not what I expected. Perhaps it should be mentioned in the docs - also if other "basic" SVG shapes attributes are ignored.
  5. knalle

    wiggle path of SVG

    That works Thanks! The waveSVG is a solution that works just as fine as Blake's demo. Is there any benefits in speed / CPU load compared to the other (blob) solution?
  6. knalle

    wiggle path of SVG

    I wan't to wiggle an existing path - in the style og the blobs here: https://codepen.io/osublake/pen/vdzjyg , but this one creates blobs instead of using an existing. In this previous post there are some discussion on the topic: I have tried Jack's waveSVG that accepts existing path data. But I notice the start and end points aren't aligning in the wave motion. I will only wiggle a blob consisting of around 20 points. The various blobs are used as backgrounds for line icons. Thanks in advance
  7. aaaahh stupid and a bit weird error I use the lovely ScrollMagic and while developing I use the addIndicators plugin... and every now and then I hide the indicator through CSS with: script ~ div {display: none;} Since the indicators (divs that has no IDs og classes) were added after the last <script> tag - so I though I had come up with a smart way of targetting those divs I had not transferred that CSS line to the Codepen, so it worked of course So it works now, but I don't understand how it causes the error in Firefox (?).
  8. it's the area beneath the image that is supposed to be draggable (and it is working in the pen somehow)... but I cannot work out why the link I posted isn't working in FF
  9. codepen - the snapping isn't working in the pen ... but it appears to working in firefix here.
  10. Draggable works perfectly in all browsers - except Firefox (Windows - haven't tested on Mac yet). It gives me this error: TypeError: Argument 1 of SVGPoint.matrixTransform is not an object. And then the Draggable is not working at all Check it here: http://gsap.mouret.dk/ Any suggestions?
  11. .... seems the solution was to add the two functions to the TimelineLite instead og the two TweenLites: flapTl = new TimelineLite({onComplete:reverseTween, onReverseComplete:restartTween});
  12. I need to use TweenLite due to space limitations in the project (yay!) I suspect the TweenLite isn't working because of the Timeline... not sute really Any suggestions on how to yoyo and repeat with TweenLite? //working TweenMax version function flapWingsMax() { flapTl = new TimelineLite(); var wl = TweenMax.to("#wing_left", 0.1, { scaleY: 0.5, repeat: -1, skewX: 20, transformOrigin:"86px 104px", yoyo: true, onComplete:reverseTween, onReverseComplete:restartTween, ease: Sine.easeInOut }) var wr = TweenMax.to("#wing_right", 0.1, { scaleY: 0.5, skewX: -20, repeat: -1, transformOrigin:"9px 87px", yoyo: true, ease: Sine.easeInOut }) flapTl.add(wl, 0); flapTl.add(wr, 0); } // TweenLite - NOT working function flapWingsLite() { flapTl = new TimelineLite(); var wl = TweenLite.to("#wing_left", 0.1, { scaleY: 0.5, skewX: 20, transformOrigin:"86px 104px", onComplete:reverseTween, onReverseComplete:restartTween, ease: Sine.easeInOut }) var wr = TweenLite.to("#wing_right", 0.1, { scaleY: 0.5, skewX: -20, transformOrigin:"9px 87px", onComplete:reverseTween, onReverseComplete:restartTween, ease: Sine.easeInOut }) flapTl.add(wl, 0); flapTl.add(wr, 0); function reverseTween() { this.reverse(); } function restartTween() { this.restart(); } }
  13. seeking the same as hemmoleg asked quite a few years ago I'm also changing direction (zoom in/out) and the updateTo does not solve - guess we seek a more physical behavior with deacceleration+acceleration when changing midtween.
  14. Thank you OSUblake, I resolved to individual x,y,z properties in stead of a combined transform.
  15. I would create the complete animation in a Timeline and then scrub back and forth in the animation (Timeline progress) var tl = new TimelineMax(); TweenLite.to(tl, 0.5, {totalProgress:yourScrollValue, ease:Expo.easeOut});
  16. doh! I was so sure I had replaced the files.... sorry - of course works like a charm now
  17. Yeah I tried the perspective thing on the container div ('stack'). I've put this css in: -webkit-perspective: 550; -webkit-perspective-origin: 50% 50%; - still isn't working
  18. Haven't figured out how to use jsfiddle with gsap (?) but I've uploaded it here: http://www.knalle.dk/greensock/examples/fiddle.html it's suppose to be a stack of slides positioned in 3d space - but they are all just sitting at the same spot. all css and js is in the single html file (so perhaps you can inspect it - sorry for the inconvenience) When I inspect the elements
  19. I have the latest download (just double checked it). Also I'm in Chrome and have tried some basic vendor prefixed css properties just to make sure that the trnasformations are working... I'll fiddle something in a minute.
  20. Maybe I've missed something. Can't get the new 3d transformations working TweenMax.set($('#slide4'), {css:{x:"30px", z:"-100px", zIndex:500}}); Why?
  21. There was one (now) obvious mistake we made... 5 repeats = 6 loops. So it should be: var repeats = 20, tl1 = new TimelineMax({repeat:repeats}), tl1ProgressUnit = 1 / (repeats+1); tl1.totalProgress(8 * tl1ProgressUnit); Probably a common mistake
  22. Ok yeah of course But how about css properties. Would It be right to use a tween with 0 duration for setting for instance "left" and "opacity"?
  23. I want to create somthing similar to the (Flash) Throw Slider: http://www.leebrimelow.com/?p=422 Anybody done anything like this with gsap? What touch libraries do you recommend?