Jump to content
Search Community

Move pinned div to basic properties

filippos test
Moderator Tag

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

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

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

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.
×
×
  • Create New...