Jump to content
Search Community

Two columns animation

Trabajador test
Moderator Tag

Go to solution Solved by Carl,

Recommended Posts

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

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

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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

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

  • Solution

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

  • Like 3
Link to comment
Share on other sites

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

  • Like 2
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...