Grid to fullscreen

[Omarhab]

In my codepen i am trying to accomplish the animation in this prototype https://imgur.com/BhQ2X9F

 

my first question is — why are the width & height changes not animating in the codepen? 

 

Did you see the imgur animation? As a gsap newbie — How do you suggest accomplishing an animation like that? Do you think the grid has to be absolutely positioned?

See the Pen YzKajLz by ohabash (@ohabash) on CodePen

[ZachSaucier]

20 minutes ago, Omarhab said:

As a gsap newbie — How do you suggest accomplishing an animation like that? Do you think the grid has to be absolutely positioned?

Generally speaking things like this are done using a FLIP approach. You should read this post to learn more about it. We provide a helper function for FLIP animations with GSAP in our helper function list. 

 

Optimally you'd have full knowledge of the positioning and sizing of the clicked on element before and after the transition. Then you can use position: absolute for the transition animation and go from the initial to the final position.

 

24 minutes ago, Omarhab said:

why are the width & height changes not animating in the codepen? 

You need to give them a positive duration  Right now they both have a duration of 0. If you want to have a duration of 0, you should use .set() instead.

[Omarhab]

@ZachSaucier Lots of good info. Thank you! I was able to get this far in a fork 

 

See the Pen oNvqQBm by ohabash (@ohabash) on CodePen

 

do you have any suggestions to make it better? (new to animation) Trying to accomplish this https://imgur.com/BhQ2X9F

[ZachSaucier]

1 minute ago, Omarhab said:

I was able to get this far in a fork 

Good start!

 

2 minutes ago, Omarhab said:

do you have any suggestions to make it better?

Add explosions!!! ???

 

Just kidding. No suggestions at the moment. Keep going!

[Omarhab]

next challenge is how do i know when `timeline.reverse()` is finished. I need an onComplete on for reverse, not play

[ZachSaucier]

There's an onReverseComplete parameter just for that  

[Omarhab]

is onReverseComplete supposed to be used as a callback

 

this.timeline.reverse(e => placeholder.remove()  );

 

or a param?

 

this.timeline.to(inner, 0.5, {

      background: '#dc0038',

      height: '100%',

      ease: Back.easeOut.config(1.7),

      onReverseComplete: (e) => placeholder.remove()

    }, 0.05);

 

Neither is working for me

[OSUblake]

1 hour ago, Omarhab said:

 

this.timeline.reverse(e => placeholder.remove()  );

 

That's not how .reverse() works.

https://greensock.com/docs/TimelineMax/reverse()

 

1 hour ago, Omarhab said:

this.timeline.to(inner, 0.5, {

      background: '#dc0038',

      height: '100%',

      ease: Back.easeOut.config(1.7),

      onReverseComplete: (e) => placeholder.remove()

    }, 0.05);

 

Neither is working for me

 

Posting code snippets isn't helpful. Fork your previous demo, and show us that it's not working. 

 

 

Also, I saw your demo on mobile, and I think you're going to have problems when the page has been scrolled. This might be helpful to look at.

 

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

 

 

Here's another good demo to learn from.

 

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

 

 

That demo is from this thread.

 

[Omarhab]

Thank you for that... My project has all the changes suggested. Though I haven't updated everything in

See the Pen oNvqQBm by ohabash (@ohabash) on CodePen

 — I did update the part that is not working.

 

the tweens need to include current scroll position in the changing attributes. But they are always reflective of page load. I saw what was suggested from the other pen but mine is going a slightly different with this particular issue.  Look how i am trying to set "top" on line 27.

 

How can i modify the pen to get current scroll position each time?

[OSUblake]

27 minutes ago, Omarhab said:

How can i modify the pen to get current scroll position each time?

 

In the first demo I posted, I used this function to get the position with scroll.

 

var root  = document.documentElement;
var body  = document.body;

...

function calculatePosition(element) {
    
  var rect = element.getBoundingClientRect();
  
  var scrollTop  = window.pageYOffset || root.scrollTop  || body.scrollTop  || 0;
  var scrollLeft = window.pageXOffset || root.scrollLeft || body.scrollLeft || 0;
  
  var clientTop  = root.clientTop  || body.clientTop  || 0;
  var clientLeft = root.clientLeft || body.clientLeft || 0;
    
  return {
    top: Math.round(rect.top + scrollTop - clientTop),
    left: Math.round(rect.left + scrollLeft - clientLeft),
    height: rect.height,
    width: rect.width,
  };
}

 

[Omarhab]

I'm doing that now. However, in my pen, scrollTop is only set once (on page load). Im trying to get a new scroll position every-time the animation runs.

[OSUblake]

16 hours ago, Omarhab said:

However, in my pen, scrollTop is only set once (on page load). Im trying to get a new scroll position every-time the animation runs.

 

You don't do it once. You create a new animation every time. 

[Omarhab]

duh! thank you.