Jump to content
Search Community

How to make this transition?

nickelman test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

Link to comment
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
Link to comment
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.

Link to comment
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? 

Link to comment
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
Link to comment
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.. 

Link to comment
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
Link to comment
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.

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...