Jump to content
Search Community

Creating a circular curtain open animation

vipulsharma144 test
Moderator Tag

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

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

Link to comment
Share on other sites

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

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 

 

Cheers!!

:ugeek:

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.
×
×
  • Create New...