Jump to content

DD77

Members
  • Content Count

    133
  • Joined

  • Last visited

Community Reputation

8 Newbie

About DD77

  • Rank
    Advanced Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Thanks, TweenMax.set('.clipboard', {width:+rec.width / 1.8, height: +rec.height / 1.8});
  2. @Dipscom Hi Alvaro, I hope I could grab your brain as I need to slightly add a functionality on this mask. I managed to add a size calculation of the W and H of the circle. , onComplete(){ dim(); } function dim(){ var c = document.getElementsByTagName("circle"); var rec = c[0].getBoundingClientRect(); console.log("width: "+rec.width); console.log("height: "+rec.height); } I'd like to apply this function it to a div <div class="clipboard" in here width and height of the circle> and have it on resize which hopefully is already being calculated. Any thought or suggestion? I made a demo, doesn't work on resize, how can I have it also on resize? https://codepen.io/davide77/pen/agoQpb?editors=1010
  3. I can only say Thank you! You make it look so easy!
  4. Yes correct. Is the same logic pretty much. In this case I need the mask to load from 0 to 50% which works. Then on click it will expand full bleed. I managed to do it by availing the circle on the svg, as I found to difficult in other way.
  5. I'm struggling to make the mask animation to open 100% when I click the button. I'm not sure how to reuse the function figureMask properly. I'm pretty sure the r = figureRadius(data.width, data.height) / 2; should be r = figureRadius(data.width, data.height); but I don't know how to animate it. Is it possible to have some directions please? - on load animate mask 50% of screen (works) - 1st click animate mask 100% of the screen (doesn't work) - 2nd click return to 50%
  6. Hello, I trying to have a smooth dragging animation which almost works. The only missing parts that I'm struggling with are: - I'd like to have the knob following the path along the line. - second id like to have a onComplete function once the knob are at the end of the line. - also anyway I can make the knob draggable in a better way? is difficult to "grab it with the mouse". Any help is much appreciated. , onComplete:function(){ console.log('do the magic'); }
  7. DD77

    SVG animation

    @PointC if you could check that would great. https://codepen.io/davide77/pen/WaWaNE?editors=1010
  8. DD77

    SVG animation

    Hi @PointC this is what I achieved with your amazing support! I'm not sure, but if I click twice on the same button, it doesn't restart the animation. I was hopping you could spot the issue! Thanks in advance
  9. DD77

    SVG animation

    Sure! all the best and thank you
  10. DD77

    SVG animation

    DO I need to call the doCoolStuff function again?
  11. DD77

    SVG animation

    I should open again in order to have the animation restart?
  12. DD77

    SVG animation

    it should have a value close right?
  13. DD77

    SVG animation

    var newAnim = new TimelineLite({paused:true});
  14. DD77

    SVG animation

    the if is setting the states if (toggle === "closed") { toggle = "open"; }
  15. DD77

    SVG animation

    I tried something like that, if(toggle = "open") { anim.pause(); }else { anim.play(); }