[How can I translate and rotate the card on scroll to multiple section]

2 hours ago, mvaneijgen said:

This forum is for getting help and pointing you in the right direction. We just don't have the resources to provide free general consulting or do logic troubleshooting. You are welcome to post in the "Jobs & Freelance" forum for paid consulting.

 

But it is fairly simple if you just open the docs and follow from there, good luck!

Aright, Thanks

[How can I translate and rotate the card on scroll to multiple section]

19 minutes ago, mvaneijgen said:

You want to create a timeline for that. Right now you're using just one gsap tween to create your animation, I recommend always making a timeline instead, only when you are a 100% certain you only ever going to use one animation than gsap.to() is fine to use. 

 

Take a look at the docs over at "Advanced example" https://greensock.com/docs/v3/Plugins/ScrollTrigger and just add another tween to your timeline that makes your card opacity: 0.5 You can play with the position parameter to have it start a moment before it reaches the end 

Alright, Actually I need to deliver this by tonight, That's why I am so much worried. Can you please show me in the codepen please. @mvaneijgen
Requirement are almost done but just need to add the opacity.

[How can I translate and rotate the card on scroll to multiple section]

36 minutes ago, mvaneijgen said:

Hey @Maddy_007 have you seen the end: property? You could set this to something like 0.9 to have it stop when it has traveled 90% of the line or some other value that suits your need. See the docs for more info https://greensock.com/docs/v3/Plugins/MotionPathPlugin

Thankyou so much, One thing more what if I need to add the opacity to 0.5 while the card is reaching to end. How can I obtain that? Thanks in advance

[How can I translate and rotate the card on scroll to multiple section]

Hello, @mvaneijgen @OSUblake

Please see the codepen link. I have achieve this by using scroll trigger and motion path plugin. but I want that when my card reach to the bottom. The scroll animation stops. I have used the end property of motion path but it does not works well. also the card is not in viewport. may you please help

See the Pen abGPaWj by maddy_001 (@maddy_001) on CodePen

[How can I stop the movement of the card when it touch to the bottom]

Hello, 
I want to stop the motion path when the card reach to the bottom, I have also use the end property in the motion path object but it not works well. And also my card it not in the view while scrolling. It been two days I am working on it, can Any please help me out.

See the Pen abGPaWj by maddy_001 (@maddy_001) on CodePen

[How can I translate and rotate the card on scroll to multiple section]

Hey @mvaneijgen, Thanks alot but I just need simple pinning and need to translate left and right on sections.

 

[How can I translate and rotate the card on scroll to multiple section]

Thank you for help. @Rodrigo Ma y be this pinning box would help me. 

What I am thinking of making multiple timelines animation for each section and trigger them while scroll to that particular section. 

[How can I translate and rotate the card on scroll to multiple section]

Hello GSAP family, 
I am new to GSAP. Can you please help me out with how I can achieve this animation on scroll? 
I want to pin the card from a particular section and rotate and translate to multiple sections as shown in the image, but in the end I have to put it in between the cards as shown. 
Please help me out with this.

Kind Regards