filippos Posted November 4, 2021 Share Posted November 4, 2021 Hi, I want to smooth move down div with class ".box" using ScrollTrigger with "pin" value from changed position values (top and left) to base div position as in ".visible" class. I spended many hours working in this case and I still don't have any idea how to do it. The starting position of the div is changed and I would like it to move pinned down and take the base position when scrolling at the end. Please help See the Pen xxLYZmY by FilipGC (@FilipGC) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted November 4, 2021 Share Posted November 4, 2021 Hi filippos, So sorry, I've read this a few times and I'm a little confused by your question. You don't have any GSAP code in here - could you possibly show us what you've tried? (maybe) you're trying to animate between two states? If so FLIP plugin will help you there.https://greensock.com/docs/v3/Plugins/Flip 1 Link to comment Share on other sites More sharing options...
filippos Posted November 5, 2021 Author Share Posted November 5, 2021 Hi Cassie, Unfortunately this plugin is paid I updated the example with gsap code. After scrolling, I would like to move the div to the target position and not just change its dimensions as it is done so far. Div stays in position top: -300px; left: 500px. I would like it to take values as in the 'visible' class Link to comment Share on other sites More sharing options...
GreenSock Posted November 5, 2021 Share Posted November 5, 2021 I have read your question about 5 times and I'm still lost, @filippos, sorry. I wonder if you're just saying that you want to animate the top and left properties too? If so: See the Pen YzxaPvL?editors=1010 by GreenSock (@GreenSock) on CodePen It's usually not good to animate the element you're pinning, so just put it into a wrapper <div> and pin that. Link to comment Share on other sites More sharing options...
filippos Posted November 6, 2021 Author Share Posted November 6, 2021 Yes, this is exactly what I would like to do but I would like to keep the div in center (50%) position of viewport height. In place where is scroller-start. Setting for example "end: +=1000px" is not the good solution. @GreenSock Link to comment Share on other sites More sharing options...
GreenSock Posted November 6, 2021 Share Posted November 6, 2021 26 minutes ago, filippos said: Yes, this is exactly what I would like to do but I would like to keep the div in center (50%) position of viewport height. In place where is scroller-start. Setting for example "end: +=1000px" is not the good solution. @GreenSock Sorry, I don't understand what you mean. If your goal is to keep it centered (vertically?) where it is pinned, why are you also wanting to animate its "top" property (which would of course change where it is vertically)? 🤷♂️ Link to comment Share on other sites More sharing options...
filippos Posted November 6, 2021 Author Share Posted November 6, 2021 I created a new example. I would like the div to move from section one to section two. But div takes position elsewhere even though it's contained in section two. @GreenSock See the Pen vYJReMB by FilipGC (@FilipGC) on CodePen Link to comment Share on other sites More sharing options...
filippos Posted November 6, 2021 Author Share Posted November 6, 2021 In the first section there will be a photo with a shape that, when scrolled, turns into a photo that is placed in the second section. So the photo will appear in the first section and occupy its position in the second section. The HTML location should be as in the example. I am sorry if I am explaining wrongly what I want to achieve. @GreenSock Link to comment Share on other sites More sharing options...
GreenSock Posted November 6, 2021 Share Posted November 6, 2021 I don't understand why you're doing any pinning - why not just do this?: See the Pen VwzXrre?editors=1010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
filippos Posted November 6, 2021 Author Share Posted November 6, 2021 Ok, maybe this is a solution, but only partial. Try to set -600px in ".box". The animation is too fast and the box is running out of the area and I would like it to stay on the black line all the time until the end of the animation. @GreenSock See the Pen jOLzaJe by FilipGC (@FilipGC) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted November 6, 2021 Share Posted November 6, 2021 Isn't it just a matter of correcting your end value?: See the Pen jOLzYOX?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
filippos Posted November 6, 2021 Author Share Posted November 6, 2021 @GreenSock Yes, THANK YOU SO MUCH! After a few changes I was able to get what I needed. You can't even imagine how many hours I spent on this animation. I'm just getting started with GSAP so I will probably start some other discussions in the future. Thank you very much once again Link to comment Share on other sites More sharing options...
GreenSock Posted November 6, 2021 Share Posted November 6, 2021 No problem! Welcome to the world of GSAP, @filippos. I think you're gonna have a lot of fun with the tools. 🎉 2 Link to comment Share on other sites More sharing options...
filippos Posted November 8, 2021 Author Share Posted November 8, 2021 @GreenSock I have another question about this animation. When scrolling faster (when there is a greater distance between the origin and the end point), the animation freezes, is there any way to make it softer? Link to comment Share on other sites More sharing options...
GreenSock Posted November 8, 2021 Share Posted November 8, 2021 9 hours ago, filippos said: @GreenSock I have another question about this animation. When scrolling faster (when there is a greater distance between the origin and the end point), the animation freezes, is there any way to make it softer? I don't understand - I can't replicate that behavior at all. How can I make it freeze? Can you provide very specific instructions about getting it to freeze? And are you using my last CodePen? If not, please provide a minimal demo. Link to comment Share on other sites More sharing options...
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