Jump to content


Creating a circular curtain open animation

Go to solution Solved by Diaco,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts


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

Link to comment
Share on other sites


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

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

Thank You So   much @Diaco What an amazing animation you have got there :-P  .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 




Link to comment
Share on other sites

  • Solution

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

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

  • Like 2
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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



Link to comment
Share on other sites

Hi :)


try this :

var tl = new TimelineMax({reversed:true});
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.