Animating grid items on click

[ekfuhrmann]

I should start by sharing the inspiration for what I'm trying to re-create via GSAP.

 

https://tympanus.net/Development/ExpandingGridItemAnimation/

 

In this example, when a grid item is clicked, the metadata for that item is captured and then populated into a modal-like view while transitioning the image (in this case a guitar) to a new location. I was able to get the metadata stuff working no problem, but have run into issues when trying to have my image transition from the clicked grid to the modal resting place.

 

I'm a bit stumped where to go for this transitional animation. As you will be able to see in the codepen, I tried playing around with capturing the starting/ending positions and using Transform to transition it from the starting place to the resting, but things are just not lining up or working -- specifically when it comes to scaling it.

 

Also, I'd be interested to hear some thoughts on best way of closing, or reversing the animation. I'm aware of `tl.reverse`, but since I'm killing this thing once done I'm not really sure best approaches for tackling that.

 

I'm definitely new to OOJS and this is really my first time playing with Classes, so apologies if I set stuff up poorly.

 

Lastly, I've also gone ahead and attached the JS file used in the tympanus demo. They used Anime for the transitions, but it may help provide some more clarity for those of you who understand GSAP/Classes better than myself:

• main.js

 

See the Pen dQMZyO by ekfuhrmann (@ekfuhrmann) on CodePen

[ekfuhrmann]

I've made some adjustments from the original post, but I wanted to bring up a newish issue I've run into. The scaling works on the initial click and play through, but on subsequent play-throughs it no longer is applying the `from` width property.

 

In addition, and really may be related, I have issues resetting /reversing the animation. A lot of what I tried has resulted in flickering or multiple timelines playing at once, so that's still a sore-spot I'm working through.

[Carl]

Thanks for the demo, unfortunately I'm not really following what is happening.

Please understand it is very difficult to look through 150 lines of code with no comments AND large chunks commented out for no apparent reason.

 

It seems the core of your issue is that you want an animation to open, revealing somethings and then close via some interaction. I'm certain you could simulate that with a dozen or so lines of code and 2 or 3 elements that reveal and hide. All the stuff about dom elements being populated with different data is just unnecessary clutter. 

 

The one area that jumped out as a potential trouble spot is that in your open function you have this code

 

this.tl
      .fromTo(this.DOM.img, 0.8, {
        x: (rect.boxImgRect.left - rect.detailsImgRect.left),
        y: (rect.boxImgRect.top - rect.detailsImgRect.top)
      },{
        x: 0,
        y: 0
      })
      .fromTo(this.DOM.img, 2, {
        width: rect.boxImgRect.width,
      }, {
        width: '100%',
        clearProps: 'width',
        onComplete: () => (this.isAnimating = false)
      }, 0);

 

which keeps adding new tweens at a time of 0 to the same timeline. putting new tweens at the beginning of a timeline isn't going to place the playhead at a time of 0 and play the timeline. maybe you need to call restart() also? 

 

Its not clear to me why all those values have to be recalculated and why the timeline needs fresh tweens every time. in most cases you would just restart() the timeline again and your open and close would just be a play() or reverse() of that timeline.

 

I suspect that if you can simplify the demo so that you can demonstrate the issue with as little code as possible, we will be better suited to give you more decisive guidance.

 

Also if you are going to revise your demo, please make a fork as it makes it very difficult for people to try to figure it out if it changes.

 

Thanks

 

[OSUblake]

I think @Carl did a good job pointing out the main issues you are having. 

 

It looks like you are trying to do a FLIP animation.

 

See the Pen GxYPOX by osublake (@osublake) on CodePen

 

 

This is a good place to start.

 

 

 

 

 

[OSUblake]

Your DOM code is pretty verbose, so I made another version with lit-html.

 

I didn't do a reverse a animation, but you could do it the just like the open animation. You don't have to reuse or reverse the same timeline.

 

See the Pen zMqevJ by osublake (@osublake) on CodePen

 

 

 

[ekfuhrmann]

@OSUblake Wow. Here I was working on a new example to simplify and refactor as @Carl rightfully suggested how confusing it was to follow and understand -- then I see your post regarding flexbox animation via capturing start/end position which got me excited -- AND THEN you drop this codepen on me.

 

Your expertise and knowledge never ceases to amaze me! Just incredible, thank you!

 

It's late right now and I've been working through this all day so I'm going to get some sleep and come back into it fresh tomorrow and really look through how you went about doing it. I'll most likely end up dissecting a lot of what you did to try and learn it better and adapt it for the current draft I was working on, but just having this resource will be of tremendous help.

 

I'll absolutely be sure to reply back here and share what comes of it all, but in the meantime, again, I just can't begin to thank you both for the assistance and help you have provided. Honestly, you guys make up one of the best dev communities out there that I've come across, so genuinely thank you for that.

[ekfuhrmann]

@OSUblake with the help of your Codepen and a much simpler Class system, I was able to really improve the Codepen to a much better spot, but I'm running into one minor issue.

 

I made the details image always visible and set it to grayscale so you can see what I'm talking about, but after running the animation once, it seems like my b.top is off by ~25px. Looking through both the Open and Close function I can't identify anything that could be causing it and was wondering if you may see something I'm missing.

 

I also have a question regarding the following:

this.image.style.cssText = "";

 

Is there a specific reason you used this over a clearProps within the Close timeline?

 

Updated Codepen:

See the Pen EOKrEJ by ekfuhrmann (@ekfuhrmann) on CodePen

 

Again, thank you so much!

 

[OSUblake]

 

12 hours ago, ekfuhrmann said:

I also have a question regarding the following:

this.image.style.cssText = "";

 

Is there a specific reason you used this over a clearProps within the Close timeline?

 

 

Habit mostly. It's also faster. And with FLIP animations, sometimes I don't want my props to permanently removed. If an animation is interrupted, getBoundingClientRect() can give you unexpected results because it takes transforms into account.

 

Coordinates can be confusing. From this post. 

https://greensock.com/forums/topic/17406-is-there-a-default-x-y-of-element/?tab=comments#comment-78419

 

See the Pen d960fccd812eb2de06e2a05f7e2255df by osublake (@osublake) on CodePen

 

 

Sometimes I need to temporarily clear the cssText in order to do some calculation.

 

// save and clear cssText
var cssText = myElement.style.cssText;
myElement.style.cssText = "";

// some calculation

// put cssText back
myElement.style.cssText = cssText;

 

 

And sometimes I need to get a transform value inside a calculation. clearProps will remove the _gsTransform object from the element, which could throw an error if you're not careful.

 

// Error
TweenLite.to(element, 1, {
  x: 100,
  clearProps: "all",
  onComplete: function() {  
    console.log(element._gsTransform.x); 
  }
});

// All Good ?
TweenLite.to(element, 1, {
  x: 100,
  onComplete: function() {  
    element.style.cssText = "";
    console.log(element._gsTransform.x); 
  }
});

 

 

 

[OSUblake]

12 hours ago, ekfuhrmann said:

I made the details image always visible and set it to grayscale so you can see what I'm talking about, but after running the animation once, it seems like my b.top is off by ~25px. Looking through both the Open and Close function I can't identify anything that could be causing it and was wondering if you may see something I'm missing.

 

 

Animating to a smaller image height is causing the modal to recenter, moving the image's position down. 

 

See the Pen OaXaxQ by osublake (@osublake) on CodePen

 

 

You could add an another element to maintain the height so it won't shrink. Another option is to clone the image, and animate the clone instead.

 

See the Pen WwgQEV by osublake (@osublake) on CodePen