Draggable in angular

[SuBirada]

Hi Everyone,

 

I am very new to gsap, I am trying to create a Carousel slider which should show the current item enlarged same as the below codepan in Angular11. This codepen is writen in JS and has older version of gsap.

 

I have attached the angular app ts, html and css files where I have created draggable but doesn't work as expected and only last time is draggable. Please help me to achieve the same behavior like the above codepen. 

 

Thanks you much,

 

 

app.component.ts app.component.html app.component.css

See the Pen JjYbjaM by gooogooo (@gooogooo) on CodePen.

[GreenSock]

I'm curious - is this for a class assignment or something? It looks very familiar: 

 

Unfortunately we don't have the resources to download your files, comb through them and troubleshoot for free but if you can provide a minimal demo (perhaps in codesandbox) and ask a GSAP-specific question, we'd love to answer it.

 

I suspect the link to the other thread above will give you the help you need.

 

Happy tweening! 

[SuBirada]

Thank you so much for your reply. Yes it is a class assignment. I am able to fix the above issue but now I am straagling to set borderbottom property ? I tried all the options like borderBottomColor:"#0000ff", borderBottomStyle:'1px solid #0000ff' but didn't work.  Please find the attached file for the expected result.

 

Pleased find the below stackblitz for my carosel application where next and previous doesn't work as expected. I am very beginner to gsap couldn't able to fix the issue.

 

 

 

[Cassie]

Hi Surekha,

You'll need to add CSSplugin.

Check out the docs here.
https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin

[GreenSock]

7 hours ago, Surekha B said:

I am straagling to set borderbottom property ? I tried all the options like borderBottomColor:"#0000ff", borderBottomStyle:'1px solid #0000ff' but didn't work.

I don't see any mention of border in your code. Did I miss something? 

 

7 hours ago, Cassie said:

You'll need to add CSSplugin.

That's baked into the core of GSAP 3, so unless your build process is dropping it (which would be extremely rare), you shouldn't really need that. 

 

7 hours ago, Surekha B said:

Pleased find the below stackblitz for my carosel application where next and previous doesn't work as expected. I am very beginner to gsap couldn't able to fix the issue.

We'd be happy to answer any GSAP-specific questions, but unfortunately we can't provide free general troubleshooting and consulting services, especially if this is for a class project where I assume you're being graded on your ability to figure those things out on your own. I noticed you're still using the old syntax from GSAP 2 and earlier - you shouldn't need any mention of TweenLite, TimelineLite, TweenMax, or TimelineMax. See

Remember, I already linked you to a post where I ported that example over to GSAP 3 and solved the original issues. 

 

Good luck with the school project. ?