Jump to content
Search Community

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

Maddy_007 test
Moderator Tag

Recommended Posts

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 Regardspage-animation-tiny.thumb.png.67ead9d65129793c716331465001bca9.png

Link to comment
Share on other sites

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

Link to comment
Share on other sites

Hi @udk.nabeel welcome to the forum! 

 

As stated above we don't have the resources to provide free consulting. What I would do is hop over to the ScrollTrigger demo page and see what comes close to what you want  https://greensock.com/st-demos/ here is one that pins something while other content scrolls 

See the Pen PoPjXPE by mikeK (@mikeK) on CodePen

 

If I where to build something like this I would give your card element in its own container, pin it to the browser for the whole duration and animate the card it self from left to right based on the triggers of each section. 

  • Like 1
Link to comment
Share on other sites

Hi,

 

There was a thread somehow related to this in the last couple of days:

While this may not be exactly what you're looking for, hopefully it provides a good starting point. Be aware that the examples in that thread are reparenting the element being animated by Flip and you need more than that. The setup I can think of is to have on each stop or step of the card's animation, an empty DOM element with the size and transformations that the card should have there and that should make Flip's work super easy. Just get the state from that element and apply it to the card. @mvaneijgen always recommend users to do the animation without Scroll Trigger first and I think that advice is spot on on this one. Just use buttons to switch between the states first using gsap.set(), then move onto creating the animations with Flip and finally plug ScrollTrigger into it. It would make development and debugging far easier.

 

If you have any questions along the way, don't hesitate to ask and remember to provide a minimal demo.

 

Happy Tweening!

Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
Share on other sites

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

 

See the Pen mdLaGNP?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :)

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