DD77

By clicking the button twice I meant:

When the button is clicked than I return to the 3 button screen if I click the button that I previously clicked the button won’t work. 

I completely understand your point and I will see what I can do. I hope to figure something out. 

@Dipscom
Mate, I just realised that if I click twice a circle button, stops working. 
Why the animation doesn't  start again?

Hi Dipscom,

yes, long time! I'm glad you came to the rescue! 
thank you so much for this! really helped.

@PointC
After all your precious help I achieved the below...
I was wondering if you could help me to revert the animation in a better way? I doing anim.reverse(); when I click the back button. is it the right way? 
 

@PointC You are a star! Is quite your fault to be honest, you push me to far with your suggestions and I get to try to make thing to big for me! But I'm learning and I learned a lot from you! 
Thanks, for your support and help!

@PointC  Thanks for your suggestion, really helped. 
Is it possible to make the images showing with a clip-path? I can't figure it out. 

I have this 3 images, which are showing fine, but I don't have the right experience. 
I should see the background image (body). 

How can I achieve this? 

@PointC would you be able to help me to improve the animation of the images please? 
the transitions are a bit glitchy a should have the feeling that they opening in a better way when I hold the buttons.
in the middle, is the idea 
 

here you go! no luck

@Carl wonderful I feel the energy on the post! however I can't get rotate it as is quite complex my svg. I have also a mask.

@carl

@PointC Any chance to make the starting point at 12 o'clock? 

Firstly thanks for your great support as usual.



Ok, I tried to use your svg and Tween on my animation.  For some reason is not working

 

I have to animate this "button" which will trigger another animation.

On mouseOver, it should animate the stroke-dasharray to white.

I need an animation clockwise that animate all the strokes. I've not a clue how to animate the stroke. 
Any idea ? Would any of you wise people able to help? 

Thanks.
 

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

@PointC I put together a demo, 
 

 but is not exactly like the one I want. 
the text should feel like scrolls 

I'm struggling to implement gsap within typeitjs.

I have 4 buttons, and each button should react in a better way.
-  I'd like to restart the typeit function each time I click a button. Is it possible to fade off the other message and show the new one from the beginning? 

If anyone is familiar with typeit, that would be great

 

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

@Shaun Gorneau thanks for this, I really appreciate it 

Hi @Shaun Gorneau thanks Shaun, this is great. 

Also there's an error, do you know why? 
Do you know how to add a bit of gsap in here? So it shows with opacity? 

Hi @Shaun Gorneau thanks great to hear that

Hi @Shaun Gorneau 
yes, Ideally, it shouldn't go off screen when is at the top. 
and it shouldn't be on the top of the pin otherwise the text gets hidden
 

I'm trying to implement a bit of gsap in here, perhaps a autoAlpha when I hover the pin.
The issue I'm having is that the text doesn't seems to be next to the pin correctly. 

- when  I hover the pin  with the mouse, the text should follow the mouse and it should be next to it.

I hope it makes sense.

 

       window.onmousemove = function (e) {
            var x = e.clientX,
                y = e.clientY,
                i, l = tooltipSpans.length;
            for(i = 0; i < l; i++){
              tooltipSpans[i].style.top = (y - 220) + 'px';
              tooltipSpans[i].style.left = (x - 420) + 'px';
            }
        };

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

Not sure what I'm missing here.
Each item should display its title. 
 

On hovering the dots,  each dot should display the title.

I'm also hopping that the code is fine.

Thanks for the amazing support. 

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

@PointC thanks is exactly what I need. Just one fix, as I don't understand why it doesn't go full screen. Any Idea why?

How can I reverse the animation on clic? at the moment is just starting it. 
Also, how can I have the circle SVG mask to start in the center of the screen. 
Looks like is offset.
Is it possible? any idea? 
 

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

@PointC that's almost it. I made an adjustment on the random size of the polygons. What do you think?

Brilliant. Thank you.

 

that

@OSUblake @PointC hi, I've made this demo, I was wondering if you could help me to make them moving individually rather than altogether. I want to have the parallax feeling on all polygons. Could you help please?