Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Omarhab

Grid to fullscreen

Recommended Posts

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

Share this post


Link to post
Share on other sites
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.

  • Like 3

Share this post


Link to post
Share on other sites
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!

  • Like 1
  • Haha 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

 

  • Like 3

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
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,
  };
}

 

  • Like 3

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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. 

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×