Tweening on a CSS Grid

[scriptmunkee]

Hi,

 

I'm brand new to tweening so i apologise if the topic has been covered already.

 

You can see in the codepen that we have a 5x5 grid defined by CSS Grid.

 

Is it possible to have an image/svg load in  do a load of stuff and locate itself on a specific location on the grid, ideally on grid column 5 and row 5 (bottom right hand corner).

 

Specifically,I'm ok with playing and tweening the logo but how would i go about making it end up in the bottom right hand corner irrespective of viewport height and width?

 

Thanks in advance

 

Chris

See the Pen VweXjeV by scriptmunkee (@scriptmunkee) on CodePen

[GreenSock]

Welcome to the forums, @scriptmunkee!

 

3 hours ago, scriptmunkee said:

You can see in the codepen that we have a 5x5 grid defined by CSS Grid.

 

 

Hm. I can't see that at all. There's just one image. No grid. Am I missing something? 

 

If you set up your CSS so that the element starts out where you want it to end (bottom right corner of the grid), you can just use regular x/y transforms to make it go anywhere, and then to have it return you'd just animate it to x: 0, y: 0. Hopefully it's pretty simple. 

 

Good luck!

[ZachSaucier]

You might want to make use of the FLIP animation technique. GSAP has its own helper function for it.

[scriptmunkee]

Thanks for pointing me in the direction of helper classes ZachSaucier I have had a look at them.

 

Jack I've updated the pen to show the grid bit daft of me not to do that in the first place.

 

From what i can gather (being a tween noob) there are quite a few different ways to achieve a one single outcome and ive likely been a bit vauge so apologies.

 

Very simply I'm looking to animate an image (logo) on grid space 13. im fine with playing with the desired animations and producing the effects id like with that.

 

What I'm asking for help with is how do i get it to move to the bottom right corner of grid space 25. I'm looking for for a dynamic response so that it works whatever the VW/VH is. so without hardcoding explicit dimensions for movement. Does that make sense?

 

Thanks, Chris

[ZachSaucier]

Here are the steps of what you need to do using the FLIP technique:

1. Record the initial position of the image with respect to the entire page (and dimensions if the dimensions are going to change). 
2. Move the element in the DOM (or use a clone), placing it where it will end up.
3. Record the final position of the image with respect to the entire page.
4. Animate from the initial position to the final position.

That's exactly what the FLIP helper function does and its demo shows...

[scriptmunkee]

Cheers Zack... I’ll get it going with FLIP (and pay proper attention even if im at the day job in future apologies.)

 

FLIP is working great. I'm having the issue though as per the demo that the tween sequence moves straight from container 1 to container 2.

 

What im looking to achieve is a tween in container1 then a flip to container2 ... how do i just add the flip on to the backend of a timeline?

 

 

Edited July 7, 2020 by scriptmunkee
Clarification and to apologise for not reading advise thoroughly before