Arun_ms Posted January 10 Posted January 10 hello guys, here im trying to create a card scroll animation, but there are some problems, i have tried many ways and use AI for help but not working, i just need the section to be pinned and card to be shown one by one , i have set animations for the image, title and paragraph so this will animate at the time when the card enters, but only the first card is visible the rest of the cards is not showing, and not animating See the Pen OPLQKpa?editors=0010 by Rare4pple (@Rare4pple) on CodePen.
mvaneijgen Posted January 10 Posted January 10 Check out my post about creating a card stacking effect. Keep in mind that the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. Hope it helps and happy tweening!
Arun_ms Posted January 10 Author Posted January 10 @mvaneijgen i think the scroll is working fine but the animation is the problem, its not working for each card when its enters
mvaneijgen Posted January 10 Posted January 10 Then the advise is still the same. Remove ScrollTrigger and focus on the animation. I also think that if you setup the animation with the logic I link in the post above you'll have a much better time setting up the logic with scroll.
Arun_ms Posted January 10 Author Posted January 10 See the Pen OPLQKpa by Rare4pple (@Rare4pple) on CodePen. hey @mvaneijgen thanks for your response, i have changed the code a bit, and got it working. but as you can see in the code there is a function called animateFirstCard(), which is not synced with the timeline, i dont want it to be worked when starting but when scrolling back to the top card the animation need to work, i tried to link with the cardTimeline time line but still not working
Rodrigo Posted January 10 Posted January 10 Hi, There is a lot going on in your demo and we don't have the time resources to go through all that trying to figure out what could be the issue. Also I think your approach might be a bit convoluted, just start simple without ScrollTrigger (as @mvaneijgen already suggested) and then, when the animation is working the way you intend, add ScrollTrigger to the mix. This demo has a similar effect with a far simpler approach as you can see: See the Pen gONMJPG by GreenSock (@GreenSock) on CodePen. Hopefully this helps Happy Tweening!
Arun_ms Posted January 13 Author Posted January 13 @Rodrigo@mvaneijgen thankyou guys for your time and efforts, i have sorted the issues and everything is working as expected, <3<3<3 thanks 1
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now