[MENU WITH A CURVE EFFECT]

Thanks Richard.

[MENU WITH A CURVE EFFECT]

Thanks all for the resources. I don't have a good understanding of SVG. So, I guess I have to learn SVG properly first before I attempt to do the animation.

[GSAP CAROUSEL]

Thanks @ZachSaucier & @PointC. Clear now.

[MENU WITH A CURVE EFFECT]

Thanks Richard. Will take a look.

[MENU WITH A CURVE EFFECT]

Hey folks,

 

If you go to the following website and click on the menu, then you will see that the menu is revealed with a nice curve effect.

https://dddhotel.jp/en/

Can this curve effect be achieved using GSAP? If yes, then can you help me with a demo? 

 

Thanks,

Hemanta 

[GSAP CAROUSEL]

@PointC

 

Hi Craig. Your solution works great.  Thanks a ton.

 

I have one more question. I am not able to understand the following line of code. 

gsap.to({}, { duration: 2.5, onComplete: slideIt });

My question is: Why is there an empty object as the first argument? What purpose does it solve?

 

Hemanta

[GSAP CAROUSEL]

Hey Greensockers,

 

I am not able to achieve the desired effect with my carousel. Need help.

 

WHAT I WANT?

After slide-04 slides out of the view from the box container, I want slide-01 to slide in from the left, and then slide-02 and so on. And the whole animation should run seamlessly forever.

 

Thanks,

Hemanta

 

See the Pen zYqKgmP by sundaray (@sundaray) on CodePen

[Ihatetomatoes "Practical GreenSock" Tutorials - Giveaway]

What I like the most about GreenSock is the ability to produce cool animations using just a few lines of code.

[news ticker using GSAP]

Thanks Craig. Appending two clones solved the issue.

[news ticker using GSAP]

Hey Folks,

 

I have run into a problem while creating a news ticker. The problem is as follows:

 

> When the text "Bad News 8" moves into the box from the right hand side, there is a gap of few seconds before  the unordered list gets appended. This issue does not appear in the attached codepen. But when you make the pen full screen (or when you test the same in localhost in your computer), you will see the gap.

 

How can I fix this issue?

 

Thanks.

 

Hemanta

See the Pen YzqqdOz by sundaray (@sundaray) on CodePen

[Understanding gsap.set( ) method]

Hi Carl, Yes, I am a student of yours. I went through the lesson: tweening function based values. Things are clear now. Thanks a lot.

[Understanding gsap.set( ) method]

Thanks Richard.

 

[Understanding gsap.set( ) method]

Hi Richard,

Thanks for your reply. My specific questions were as follows: 

 

1. What are target and targets? What is the difference between them?

2. What is the result of targets.length?

3. Why is target included as a parameter when we haven't used it in the function body?

[Understanding gsap.set( ) method]

Hey Folks,

 

I was going through a codepen demo (layered pinning from bottom) from gsap. I understood the code except the following snippet.

 

gsap.set(".panel", {zIndex: (i, target, targets) => targets.length - i});

 

The z-index property is set to a function. Can somebody explain me the function in detail?

 

Thanks a lot.

Hemanta

See the Pen BaowPwo by GreenSock (@GreenSock) on CodePen

[toggle classList in GSAP]

Hi Zach,

 

Thanks for your reply.  I actually want the CSS class called 'change' to be toggled when I click on the button.

If you see my codepen link, there is a class called 'change' with the following properties and values.

 

.change {

border: .2rem solid black;

}

 

Hope my question is clear.

 

Will wait for your reply.

[toggle classList in GSAP]

Hi Zach,

 

Thanks for your reply. I have now edited my codepen link and have linked to the right demo. 

 

Can you please take a look at the demo and let me know how do I create the same using GSAP.

 

Thanks.

[toggle classList in GSAP]

Hey folks,

 

Hemanta here. I recently started learning GSAP. And its awesome.

 

In the demo, clicking on the button adds a border to the box. I have used JS to achieve this.  How can I recreate the same using GSAP? 

 

Thanks in advance...

See the Pen pogMNrL by sundaray (@sundaray) on CodePen