Jump to content
Search Community

adding animation to carousel

Zoff test
Moderator Tag

Recommended Posts

hi all,

I am trying to add animation to carousel. I am using ngx-slick-carousel for carousel. All animations are working fine but one. when i am swiping the slide,  the animation is not taking effect. Animation is working pretty well before and after swipe complete. I want animation to be done while swiping. 

here is the code: 

 

 

let cards = currentCardBox.querySelectorAll('.card-body')
let slideNum = e.currentSlide
 
gsap.to(cards[slideNum+1], {
scaleY:1.5,
scrollTrigger: {
trigger: cards[slideNum],
start: 'left 30%',
end: "-=100",
scrub: true,
horizontal: true,
markers: true
},
});

 

 

Q What I am trying to achieve ?

Ans: when the hero card swipes to left, next to hero card become hero card with some animation.

 

 

Thanks for the help..

Link to comment
Share on other sites

Welcome to the forums, @Zoff Unfortunately we can't really diagnose anything by just looking at a snippet of code - can you please provide a minimal demo? Please only include the things that are absolutely essential to show the issue (don't include your whole project). A CodePen or CodeSandbox is best - please read the forum guidelines

 

Please also keep in mind that we can't support 3rd party libraries (ngx-slick-carousel sounds like a 3rd party library for Angular) but we're happy to answer any GSAP-specific questions. 

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