brcxyz Posted January 11, 2021 Share Posted January 11, 2021 (edited) Hi, Today I don't really have a problem, but more in need of some guidance. I am looking to achieve an effect and I'm unsure how I should go about it. What I am trying to do is sort of emulate a dynamic flex container. Think of it as a flex column container with a vertically centered group of items that I would like to add to, using ScrollTrigger. Say we currently have one item in the viewport. Upon scrolling for a bit, a new item slides up, while the first item also moves up slightly to make room for the second, such that by the end of this animation, they are vertically centered together (or both are vertically equidistant from the center, however you want to look at it). I'm not asking for a tutorial, of course, just a hint in the right direction. Still new to GSAP and I'm lost on this. I quickly put together this illustration to make it clearer, hope it helps illustrate what I'm trying to say. Edited January 11, 2021 by brcxyz Resized image Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 11, 2021 Share Posted January 11, 2021 Hey brcxyz and welcome. This sort of effect is not the most trivial but it's definitely doable. You could create a timeline that moves the first element in from outside of the viewport and keeps it centered. Then create a pair of animations, one to move the first element up a bit and another to move the second element in from outside of the viewport. Depending on how your elements are sized it could be that you need to calculate those distances yourself. Another alternative would be to use the FlipPlugin that we're releasing tomorrow - You could Flip between states, save those animations to a timeline, and then scrub through the timeline. But you'd need to recreate things if the sizes or positions change on resize, which it appears that they would. Watch the premiere tomorrow to find out more and there will be a special offer in the chat as well 1 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