Jump to content
nickelman

How to make this transition?

Recommended Posts

Hi,

 

I found a part of a transition I wonder how to achieve. Please look at the link below.

I'm talking about the transition when the user clicks on the "PLUS"-sign where that scales, moves and transitions to the big black container.

 

I've been trying with scale, transformOrigin, y, x, etc but cant seem to figure out the way to go to? 

Any ideas?

 

https://dribbble.com/shots/3124285-Personal-Site-JS-Interactions

Share this post


Link to post
Share on other sites

Hi @nickelman

 

Do you have a codepen showing your progress?

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

I'd probably approach this as a series of .from()'s as the final positioning will be trickier to get accurately than the starting point.

 

A bit pinned at the moment but, if I have time later, I'll see if I can put something rough together.

  • Like 4

Share this post


Link to post
Share on other sites

@elegantseagulls sorry I dont have a codepen for it, but basically I tried with timeline with different tweens for different props without no real success :) 

 

i would very much appreciate if you would be able with an example.

Share this post


Link to post
Share on other sites

@mikel

 

thanks. However, this is not really what I'm looking for. I'm totally familiar with the sequence of doing what you have posted, but as you can see in my reference there is more than that, it is more of a sequence of properties being tweened at the same time combined with sequence, which is really what I find hard to accomplish.

Share this post


Link to post
Share on other sites

Hi @nickelman,

 

Nice to hear what you can do.

 

It's always better to present a CodePen to see where it's stuck.

Just try to integrate the next steps as you wish.

 

Here's a little help: Writing Smarter Animation Code

 

Kind regards

Mikel

 

  • Like 1

Share this post


Link to post
Share on other sites

@mikel

 

I did not mean to be rude.

The reason why I dont have a CodePen for it is simply because I don't know to how approach the animation. Your example is a bit too far away from what my reference is. If you look at the box that is expanding when the user is clicking on the PLUS sign box, what is happening there? 

Share this post


Link to post
Share on other sites

Hi @nickelman,

 

How experienced are you with JS or JQUERY?

 

It's a simple click event that could start the 'action' timeline.

 


// set the timeline 'paused:true'
var action = new TimelineMax({paused:true})

// and later in a click event
$(".right").click(function() {
  action.play();
});

 

The hover effect ???: a box shadow ...

 

Best regards

Mikel
 

 

Edited by mikel

Share this post


Link to post
Share on other sites

@mikel

 

Okay - I think we need to start over here, a bit of misunderstanding now on this whole question.

 

Basically what I'm asking is only the transition that happens to the box where the plus sign is in. That box is growing first downwards, and some positioning on the y-axis, then it is starting to grow on the x-axis, etc.. So my question is basically how to do that combination because it all is not happening in the order of:

 

1. ScaleY downwards, and move X px downwards

2. then ScaleX

3. then scaleY up and down etc.. 

Share this post


Link to post
Share on other sites

Hi @nickelman,

 

The more specific the question, the easier it is to respond specifically.

 

I'm not a pro coder and English is not my native language.

Here is an attempt to explain the steps.

 

// my animation layout is relative to the window size usings this vars

var w = window.innerWidth;
var h = window.innerHeight;

// Based on the css properties the 'box' should be:
TweenLite.set('.right',{width:200, height:h*0.1,  y:h*0.7});
// height = 1/10 of window.innerHeight
// due to 'position:absolute' (css) the top of the box should be positioned 70% from the top (y:h*0.7).


// The other two fields are first positioned below the window:
TweenLite.set('.left, .middle',{y:'+100%'});

var action = new TimelineMax()
.to('.right',1,{width:w*0.6-100},2) // after 2 sec the width of the BOX expand to 60% (minus the width of the middle part)
.to('.right',1,{height:h*0.3},2) // same time (now) the height expand to 30% (position:70% ≙ rest: 30% ≙ h*0.3
.to('.right',1,{height:h*1,y:0}) // directly after: BOX expands to total height (= h*1) and moves up to the posiiton 'top' (y:0) at the same time
.to('.middle',1,{y:'0%'},"-=0.9") // starting a little bit earlier than the last tween ends ("-=0.9") middle and left move to the top
.to('.left',1,{y:'0%'},"-=0.95")

 

But we can also make it easier and set the whole thing in a fixed wrapper - as it may be the case in the reference.

 

See the Pen oQqgbL by mikeK (@mikeK) on CodePen

 

Are we going on like this?

 

Best regards
Mikel

 

  • Like 1

Share this post


Link to post
Share on other sites

@mikel

 

ah, now we are getting somewhere, sweet!

 

So, the one you refer to as "right" is the one I'm curious about. As you can see in my reference it is not moving in a sequence like "do animation, finish", "do next animation, finish", instead it is doing more like "do animation, and then after a short time start another animation with other properties..."? You see what I mean? More things happens at the same time in my reference... hm.

 

Share this post


Link to post
Share on other sites

@mikel okay, thanks will try out a bit myself then. If anyone has any ideas, feel free to let me know 😃

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.