DD77

@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){
		$("#menu").prepend($(element))
	} 
}

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

Yes I changed it, accordion-menu 

@Jonathan
trust me I checked, but I did some copy and paste to mate demos.

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

I'm actually using a code from  Blake! which is perfect. Unfortunately I keep getting error: Uncaught Cannot tween a null target.
 I'm trying, I've also tried your code. :-( 

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

@ZachSaucier
and thanks for that, but you not targeting the .accordion-group, also the toggle doesn't work, it should close the other

Have a look at this please

See the Pen RXwYrO?editors=0010 by davide77 (@davide77) on CodePen

@PointC 

thanks, really helpful 

@ZachSaucier
Pease have a look at this, I'm quite close, only thing is now adding the extended class to all of them. It should add the class only to the clicked one

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

@ZachSaucier
Thanks, I'll look in to that, but What I needed since the beginning was to add a class to accordion-group. 
I think that with a class to the parent I could achieve it with css.

@ZachSaucier

Yes, correct. Sorry I'm trying my best to explain. 

the 4 group are divided by 4, height:100% / 4

On click, the selected one, takes out the height of the viewport. ( and potentially goes to the top.)

@ZachSaucier
no really, the content when expanded should be 100% height, which should push the other content offset. 
Not sure how to achieve it. I was thinking that adding the class to the pared would do it.

 

@ZachSaucier
Hi Zach,

I'm trying to add a class to the div accordion-group
then, with that class I should be able to make the height 100%.

Does't this makes sense? 

I polished up the code.

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

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
   .addTo(controller);
});

Would anyone help me to achieve that please? 

Thanks,

D

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

Thanks,
TweenMax.set('.clipboard', {width:+rec.width / 1.8, height: +rec.height / 1.8});

 

@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?

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

I can only say Thank you! You make it look so easy! 

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. 

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

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

@PointC if you could check that would great. 

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

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 

Sure! all the best and thank you

DO I need to call the doCoolStuff function again?

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

it should have a value close right?