knalle

Members
  • Content Count

    23
  • Joined

  • Last visited

Community Reputation

5 Newbie

About knalle

  • Rank
    Member
  1. knalle

    Draggable not working in Firefox

    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 (?).
  2. knalle

    Draggable not working in Firefox

    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
  3. knalle

    Draggable not working in Firefox

    codepen - the snapping isn't working in the pen ... but it appears to working in firefix here.
  4. knalle

    Draggable not working in Firefox

    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?
  5. knalle

    TweenLite yoyo/repeat

    .... seems the solution was to add the two functions to the TimelineLite instead og the two TweenLites: flapTl = new TimelineLite({onComplete:reverseTween, onReverseComplete:restartTween});
  6. knalle

    TweenLite yoyo/repeat

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

    Use .set and keep existing css?

    Thank you OSUblake, I resolved to individual x,y,z properties in stead of a combined transform.
  9. Perfect - makes sense! Thanks!
  10. 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});
  11. knalle

    can't get css3 3d tranformations working

    doh! I was so sure I had replaced the files.... sorry - of course works like a charm now
  12. knalle

    can't get css3 3d tranformations working

    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
  13. knalle

    can't get css3 3d tranformations working

    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
  14. knalle

    can't get css3 3d tranformations working

    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.
  15. Maybe I've missed something. Can't get the new 3d transformations working TweenMax.set($('#slide4'), {css:{x:"30px", z:"-100px", zIndex:500}}); Why?