Share Posted April 4 Hello, I am looking for help to implement such an animation option, could you help me please? Reference See the Pen WNgebBX by trabajador-the-flexboxer (@trabajador-the-flexboxer) on CodePen Link to comment Share on other sites More sharing options...
Share Posted April 4 Hi @Trabajador welcome to the forum! Check out this topic, the demo in there looks like your question exactly! Hope it helps and happy tweening! Link to comment Share on other sites More sharing options...
Author Share Posted April 4 Hello @mvaneijgen, I have already seen this example, it changes the height of the picture, the reference has a different effect, how can I make it so that the position of the picture changes and that the last text block stops at the center of the parent block? And on the first screen, the text block should also be centered. Link to comment Share on other sites More sharing options...
Share Posted April 4 Ah the topic seems like the example you've linked to. My suggestion is to start by creating the layout with just CSS. Personally, I recommend positioning the elements where you want them to be when the animation is finished, so I suggest stacking all the elements on top of each other. You can see an example of this here: See the Pen XWxrJzW?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen After that, you only need to use a simple .from() animation with a stagger on the elements. You mentioned that you don't want the animation to affect the first and last elements, so simply remove those from the animation. The best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. See the Pen YzJKPjx?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen Once you've done that, simply enable ScrollTrigger again and you're good to go! For all of the tweens, I've set the default ease to "none" since it feels better when controlling an animation with ScrollTrigger and scrub. If you want to make any changes, remove ScrollTrigger and focus on the animation first. And when you want to tweak the layout, disable all of GSAP and focus on the CSS. I hope this helps, and happy tweening! See the Pen WNaebgL?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen 1 1 Link to comment Share on other sites More sharing options...
Author Share Posted April 4 @mvaneijgen, Wow, thanks a lot! Everything was explained very clearly and in detail! Have a good day! Link to comment Share on other sites More sharing options...
Author Share Posted April 4 @mvaneijgen, I have one more question, how can I implement these principles with absolute positioning elements so that the whole block is not 2k+ high. that the block looked the same on all displays 1440 and higher. Can you advise? Link to comment Share on other sites More sharing options...
Share Posted April 4 In my last example I had set the ScrollTrigger end to be the bottom of the element + 3000px, this because you want some scroll distance so that the effect doesn't go by with one scroll. If you talking about the the white space below the pinned container, you could solve this by adding the next container you want to have underneath to the same pinned container. Example without any scroll distance See the Pen JjmPYWw?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen Link to comment Share on other sites More sharing options...
Author Share Posted April 4 4 minutes ago, mvaneijgen said: Example without any scroll distance See the Pen See the Pen JjmPYWw?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen by mvaneijgen (@mvaneijgen) on CodePen not working Link to comment Share on other sites More sharing options...
Share Posted April 4 Could you elaborate more than just 'not working'? Link to comment Share on other sites More sharing options...
Author Share Posted April 4 all blocks are stacking and have not animation Link to comment Share on other sites More sharing options...
Share Posted April 4 @Cassie unpkg.com seems to jump in and out of existence. Yep https://www.unpkg.com/status/ is down 2 Link to comment Share on other sites More sharing options...
Author Share Posted April 4 What i am doing wrong ? How to make animation with my styles ? See the Pen WNgebBX by trabajador-the-flexboxer (@trabajador-the-flexboxer) on CodePen Link to comment Share on other sites More sharing options...
Share Posted April 4 Nice job getting it set up. it looks like you were loading multiple versions of ScrollTrigger. As @mvaneijgen mentioned it looked like there were some issues with the external asset hosting earlier. This works at the time of posting See the Pen WNaewvB by snorkltv (@snorkltv) on CodePen 1 Link to comment Share on other sites More sharing options...
Share Posted April 4 Ah I see! Good spot @mvaneijgen We can bump people to this page if they hit issues with unpkghttps://www.jsdelivr.com/gsap Link to comment Share on other sites More sharing options...
Author Share Posted April 4 One more question, how i can animate second and third text blocks from bottom? Now this blocks animated from top. And how can this block be made universal, for an indefinite number of elements? Link to comment Share on other sites More sharing options...
Author Share Posted April 4 4 hours ago, Trabajador said: One more question, how i can animate second and third text blocks from bottom? Now this blocks animated from top. And how can this block be made universal, for an indefinite number of elements? I have resolved these issues. Now the question is how do I get rid of such a space that is reserved by the pin spacer? There is no spacer in my reference ? Link to comment Share on other sites More sharing options...
Solution Solution Share Posted April 4 That extra space is probably due to the 3000px you have in your end value. Questions about this type of layout come up a bit around here. I'm in the process of making a lesson. The video in this tweet gives some background on the basic setup I added a little animation on the right in this updated (yet not finished) demo See the Pen MWPgoXV by snorkltv (@snorkltv) on CodePen 3 Link to comment Share on other sites More sharing options...
Author Share Posted April 5 Thank you @Carl, helpful information! I try to do according to your advice, but something goes wrong, could you help me please? See the Pen WNgebBX by trabajador-the-flexboxer (@trabajador-the-flexboxer) on CodePen Link to comment Share on other sites More sharing options...
Share Posted April 5 I'm sorry, what does "something goes wrong" mean? Sometimes we aren't seeing the same thing as you or know the expected results. please try to be more descriptive. thanks Link to comment Share on other sites More sharing options...
Author Share Posted April 5 32 minutes ago, Carl said: I'm sorry, what does "something goes wrong" mean? Sometimes we aren't seeing the same thing as you or know the expected results. please try to be more descriptive. thanks I solved all the problems, thanks 2 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