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? https://codepen.io/davide77/pen/aevWYQ

Yes I changed it, accordion-menu

@Jonathan trust me I checked, but I did some copy and paste to mate demos. https://codepen.io/davide77/pen/qeBJxO?editors=1010 even with the right class. Can't figure it out!!

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. :-( https://codepen.io/davide77/pen/qeBJxO?editors=1010

@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 https://codepen.io/davide77/pen/RXwYrO?editors=0010

@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 https://codepen.io/davide77/pen/rEojde?editors=1010

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

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

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? https://codepen.io/davide77/pen/agoQpb?editors=1010

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%

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

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

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?