Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by DD77

  1. @Jonathan

    I managed to achieve what I need it.  I'm still have to some one important part of this task.

    Basically, on click, the clicked element should move to the top, so like this the user could always scroll down to click the others.


    onComplete: function() { 
    	if ($(element).length){

    this code moves the element to the top. 

    Now I need a tell the others to re-order the height and the top position. Could anyone help me please? 

    See the Pen aevWYQ by davide77 (@davide77) on CodePen

  2. Hi All, 
    I'd like to add a class to accordion-group so I can make the height to 100%.
    Currently I have 4 accordion groups that have a height: calc( 100% / 4), like this they get the height of the page. Unfortunately I can get the click even to add the extended class.  className: '+=expanded' 

    Not entirely sure is the best approach. Would be lovely do get some directions.

    See the Pen rEojde by davide77 (@davide77) on CodePen

  3. I have this integrated GSAP and scrollmagic  scroll animation that is causing me once again headache.

    I think the best way to animate the slides horizontally is by using Gsap rather then the scrollmagic Option "vertical: false".

    Now, I'd like to find a way to trigger like scrollmagic does the slides and adding a class for each slide is-active.


    I tried the below but doesn't really work.

     var headers = ["#section01", "#section02", "#section03", "#section04", "#section05"];
    headers.forEach(function (index) {
      // number for highlighting scenes
    var num = index+1;
      // make scene
      var headerScene = new ScrollMagic.Scene({
          triggerElement: index, // trigger CSS animation when header is in the middle of the viewport 
          offset: -95
      .setClassToggle('#section0'+num, 'is-active')// set class to active slide

    Would anyone help me to achieve that please? 



    See the Pen JQOGJe?editors=1010 by davide77 (@davide77) on CodePen

  4. @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(){
    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?

    See the Pen agoQpb?editors=1010 by davide77 (@davide77) on CodePen




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

  6. 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%


    See the Pen xaxZYX?editors=1010 by davide77 (@davide77) on CodePen

  7. 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');  

    See the Pen daGbgP by davide77 (@davide77) on CodePen