Jump to content
Search Community

How would one animate section2 of this pen vertically (in a column instead of row)?

JakeTheDog420 test
Moderator Tag

Recommended Posts

How would I change it so that instead of the "1, 2, 3" and their respective spans animating in a row format from center right to center left, they instead animated in a column format from center then move to the left and then up (so its now in top left of screen), then 2nd image appears in center and goes left (so its now in the left middle of screen), then the last one appears center and goes down and left (so its bottom left of screen)?

 

Hopefully I'm explaining that correctly!

 

The reason I am trying to achieve this is I have modified the example to achieve the desired affect I am after, I have replaced the P element with an img element, so now it displays my image and then the span tag below it and continues with the animation.

 

I want the images to be fairly large but I don't want them to overlap, ideally they can be close enough together that they seem like one photo..

 

I would like the solution to remain responsive... (I'm able to get it to work if I keep it in a row with the correct sizing but that solution was not responsive and I have since decided it would look better in column aswell)

 

Apologies for the very newbie question! Big thank you in advance for any support or assistance anyone is able to provide me with!

See the Pen gOmOxze by Gon82 (@Gon82) on CodePen

Link to comment
Share on other sites

I misunderstood your question so this isn't quite what you asked for but it shows the method.

 

1. find the distance between your starting X position and your desired X position

2. for each item, use a series of fromTo tweens to go from position to position

 

How you go about this is up to you, but really it's just about getting the width of your container and the width of your item to animate from center.

You could also use FLIP which is a really cool plugin, but if I understand you want to do it in several linear steps then it isn't needed.

 

Basic implementation in a row: https://codesandbox.io/s/fervent-mahavira-9ucfgu?file=/src/index.js

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