Jump to content
Search Community

scroll card animation

Arun_ms
Moderator Tag

Recommended Posts

Posted

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

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! 

 

 

Posted

@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

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.

Posted

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
 
Posted

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!

Posted

@Rodrigo@mvaneijgen thankyou guys for your time and efforts, i have sorted the issues and everything is working as expected, <3<3<3 thanks 

  • Like 1

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