[Problem with FLIPping items staying position: absolute after animation]

@OSUblake sure. This is a simple version of a site I'm working on where I have grid of photos. When I click a photo, the others fade out, and the photo moves into an absolutely positioned lightbox. The photo's lightbox position needs to always be in the same place on the page, vertically centered and then horizontally centered in the left half of the page. The photos are not all square, but before running the flip animation I'm getting the target photo's aspect ratio and setting the lightbox placeholder to the same aspect ratio. Then, on clicking the backdrop or a close button, the photo moves back into its place in the grid and all the other photos fade back in. Is that all making sense?

[Problem with FLIPping items staying position: absolute after animation]

Hey all, 

 

Little bug I'm trying to figure out the cleanest way to fix. In the codepen, clicking a box FLIP fits it to the top right of the screen, then clicking that same box in the top right FLIP fits it back to its position. However, when it moves back into position, it stays position: absolute. So, if you then click the second box in the first row, the first row collapses since it isn't fixed height. Is there a clean way to revert the item to all of its pre-FLIP style parameters without using .set ? 

See the Pen eYGWroR by kslaton (@kslaton) on CodePen

[Clip-Path animation doing nothing, then jumping to end state?]

That did the trick. Thanks, @PointC

[Clip-Path animation doing nothing, then jumping to end state?]

See codepen. When I click the button, nothing happens for 5 seconds, then it jumps to the final state. Why isn't it tweening? Thanks!

See the Pen WNZbWeB by kslaton (@kslaton) on CodePen

[FLIP animation on grid gap not working]

@akapowl makes almost too much sense! Thanks so much, it also worked on the project I'm actually working on.

[FLIP animation on grid gap not working]

Hey all, 

 

I had this working yesterday, but I've now forgotten how. Can anyone tell me why why the gap on this grid is not animating back and forth but rather just snapping?

 

Thanks.

See the Pen eYEwyOK by kslaton (@kslaton) on CodePen

[Animating Arrays - Giving each item a different random value]

Perfect. Thank y'all. 

[Animating Arrays - Giving each item a different random value]

No problem at all, we love us some GSAP here at our agency. 

 

I do actually have one more question. Say I wanted the random bounds to increase on each repeat. So first go round they go random(0,500), then next round random(0, 750), etc etc. Is there a way i can accomplish that?

[Animating Arrays - Giving each item a different random value]

Perfect! Thank you so much. 

[Animating Arrays - Giving each item a different random value]

Pretty simple question, just one I can't figure out an answer to! See codepen above. Rather than having all 10 boxes moving left and right according to the same random number, I want each of them to have a different random left and right value. How can I accomplish this? 

See the Pen vYJamoV by kslaton (@kslaton) on CodePen

[TextPlugin - 'Backspace' when going from more characters to fewer?]

@PointC your reverse tween idea works like a charm. Thanks!

[TextPlugin - 'Backspace' when going from more characters to fewer?]

@PointC can you get me started on the right track to accomplishing this using SplitText? 

[TextPlugin - 'Backspace' when going from more characters to fewer?]

Hi all, 

 

I'm sure there's a super simple answer to this question, but haven't been able to find it. I'm trying to use TextPlugin to erase one bit of text, then replace it with another. My problem is on the first tween, when I'm going from some text to an empty string, it's removing the characters from first to last. How do I reverse this so it looks like someone is backspacing? (In my example, removing the 'd' at the end of 'erased' first)

 

Thanks!

See the Pen zYzNbKz by kslaton (@kslaton) on CodePen

[ScrollTrigger not working on iPad - any workarounds?]

Nevermind, all. I was able to fix this issue just by getting rid of my scroll-controller div and putting the scrollTrigger directly on the body instead. Thanks!

[ScrollTrigger not working on iPad - any workarounds?]

Hi all, I have the following site - hyvolt.herokuapp.com - which I had asked some animation questions about the other day. I'm running into another issue now. The progress of the whole site above 1200px is controlled by scrollTrigger. I have a background .scroll-controller div that the scrollTrigger is looking at, then all of the content of my site is in a position:fixed div and moves left, right, up or down depending on the scrollTrigger. It's working perfectly fine on desktop, but not working on my fiancee's iPad. I've been able to hack it into working by setting position: absolute and z-index: 10000 on the scroll-controller div, but I have buttons within my content that need to be clicked and it's now covering those up. Any quick workarounds to make that div scrollable without having to move it to the very top of the z-index stack? 

[Specific question about MorphSVG animation being jumpy on mobile]

@OSUblake thanks! Yeah, I was able to pretty easily replace my left and top. If the client will give me enough time to do so, I'm going to try the viewBox animation recommended above, which looks very nifty. Thanks for your help!

[Specific question about MorphSVG animation being jumpy on mobile]

@nico fonseca just for my own education, why is it a no-no to animate the parameters you listed above? 

[Specific question about MorphSVG animation being jumpy on mobile]

Awesome, thanks for the extra review and advice! I think the lottie stuff may be out of my hands - my on-staff animator is already a little fed-up with me, lol. I had asked about exporting as SVG instead of PNG and he said he was having trouble because of the complexity of some of the gradients and such. I will definitely go through and remove my top/left/height/width stuff though, and I'll see what I can do about maybe only getting lottie files for the animated elements. 

[Specific question about MorphSVG animation being jumpy on mobile]

Hey all. I have a mock website up on Heroku right now and trying to do some finishing touches on troubleshooting. The site is hyvolt.herokuapp.com. If you visit on mobile, select "Solutions" from the nav menu, then swipe right, you'll see the animation in question. It's a pretty complex combination of zoom, positioning, and morphSVG tweens, and for everyone on our team the animation is a little glitchy on iOS Safari in particular. Any suggestions on how we may be able to smooth that out a bit?