[showing elements within boundary]

Hello 

in the given pen i want to achieve :

 

1) Only the elements inside the circle area to be visible with ease effect of gsap.i.e on increasing the radius they must appear onto screen via gsap and on decreasing similarly should disappear

2) the elements to appear or disappear should be draggable with the container as the max limit of circle.

3) the elements should be clickable.

4) the circle opacity should be reversed i.e right now it is rgba(0,0,0,0.8) inside the circle i want it to be outside the circle so as to give the selection effect

 

waiting for help.

Thank you

 

 

 

 

See the Pen zGwyxR by vipulsharma144 (@vipulsharma144) on CodePen

[Creating a circular curtain open animation]

hey diaco 

 i am again stuck with something in

See the Pen KpayLy by MAW (@MAW) on CodePen

 (

 

how do we run the animation from the completely curtained to no curtain rather than from no curtain to curtained then no curtained 

 

its like A -> B -> A   i want B -> A

 

thanks

[Creating a circular curtain open animation]

Thank You so very much you made my day ...

[Creating a circular curtain open animation]

Thank You So   much @Diaco What an amazing animation you have got there   .This will surely help me a lot !!

 

but what i am trying to accomplish is a bit different   (although the above mentioned script is now in consideration) 

 

I have already made the slider Thank you for the suggestion. 

 

The circular showcase like effect i am talking about is somewhat like this .(sorry for my bad drawing)

 

Here i am done with the slider work what i want to know is that is it achievable by GSAP that i change the slider due to which the circle size(radius) changes and accordingly the div behind it get revealed .

 

I hope you got me! 

Once more thank you for the replay and the codepen example 

 

Cheers!!

[Creating a circular curtain open animation]

hello

I guess this is an example of just horizontal scrolling and that too not with custom horizontal scroll bar.what i am looking for is a curtain opening circular effect(like revealing of some product ) via horizontal bar .do you have any examples for that

[Creating a circular curtain open animation]

Hello 

I want to create a animation in which following events occurs

1) A custom horizontal scrollbar on the bottom of the page,this bar ro remain constant and do not move

2) A horizontal navigatable website( using magicscroll.js)

3) All the animation is related to horzontal scroll movement of the custom horizontal bar

 

Animation required

1) As soon as i move the below horizontal bar the #cover div  should reduce the opacity for the radius and the div behind it should be visible.

 

How is this animation achievable using GSAP.

Please help

 

I am  a newbie to GSAP

See the Pen gpgLNy by vipulsharma144 (@vipulsharma144) on CodePen

[Rough idea if possible fade out effect.]

Hello 

what i understood is you want to animate a DOM to fade away .This is very easily achievable by GSAP using

    $(document).ready(function(){
        var logo = document.getElementById("logo");
        var tl = new TimelineMax();
        .to(logo,5,{scale: 0,opacity: 0});     //here i have assumed you have a logo div with id = logo and then in 5 sec it wil shrink to 0 smoothly fading away.You can add any effects you want in the options array such as rotation ,alpha.x ,y etc.
        
    });

Thanks