Jump to content
GreenSock

filippos

Move pinned div to basic properties

Recommended Posts

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

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
 

  • Like 1
Link to comment
Share on other sites

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

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

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

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

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

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

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

@GreenSock Yes, THANK YOU SO MUCH! :D 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 :D

Link to comment
Share on other sites

No problem! Welcome to the world of GSAP, @filippos. I think you're gonna have a lot of fun with the tools. 🎉

  • Like 2
Link to comment
Share on other sites

@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

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

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