scriptmunkee Posted July 6, 2020 Share Posted July 6, 2020 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 Link to comment Share on other sites More sharing options...
GreenSock Posted July 7, 2020 Share Posted July 7, 2020 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! 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 7, 2020 Share Posted July 7, 2020 You might want to make use of the FLIP animation technique. GSAP has its own helper function for it. Link to comment Share on other sites More sharing options...
scriptmunkee Posted July 7, 2020 Author Share Posted July 7, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 7, 2020 Share Posted July 7, 2020 Here are the steps of what you need to do using the FLIP technique: Record the initial position of the image with respect to the entire page (and dimensions if the dimensions are going to change). Move the element in the DOM (or use a clone), placing it where it will end up. Record the final position of the image with respect to the entire page. Animate from the initial position to the final position. That's exactly what the FLIP helper function does and its demo shows... 2 Link to comment Share on other sites More sharing options...
scriptmunkee Posted July 7, 2020 Author Share Posted July 7, 2020 (edited) 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 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