Creating a circular curtain open animation

[vipulsharma144 0 Likes (Newbie)]

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

[Diaco 1,948 Likes (Superhero)]

Hi vipulsharma144 

 

this's a simple and basic example with ScrollMagic.js : 

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

[vipulsharma144 0 Likes (Newbie)]

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

[Diaco 1,948 Likes (Superhero)]

- for that effect (like revealing of some product ) ,  i think this can help you : 

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

 

- for custom scroll bar , pls search , there's plugins for that .

[vipulsharma144 0 Likes (Newbie)]

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!!

[Diaco 1,948 Likes (Superhero)]

hmmm , ok . if i understood correctly , pls check this out : 

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

[vipulsharma144 0 Likes (Newbie)]

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

[OSUblake 9,990 Likes (Superhero)]

Nice slider. I don't even think you can initialize one in jQuery UI with the amount of code your example uses 

[vipulsharma144 0 Likes (Newbie)]

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

[Diaco 1,948 Likes (Superhero)]

Hi

 

try this :

var tl = new TimelineMax({reversed:true});