Jump to content
GreenSock

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

Hide / Show sections issues

Recommended Posts

I am trying to transition between 2 <section> elements which is not working correctly.

All my other code works great, it's just this gsap part giving me grief.

 

I am passing the fromSection and toSection into a function see below, I am wanting the fromSection to fade away and hide the element, then show the toSection with elastic ease. The issue seems to be with the hide() not being applied on each onComplete and the new section with display:none still active.

Any help would be appreciated.

See the Pen eYmmEZG by james182 (@james182) on CodePen

Edited by james182
Added CodePen Example
Link to post
Share on other sites

Hey James and welcome.

 

Would you mind creating a minimal demo using this code that exemplifies your issue? It'd make it easier for us to help you.

 

Link to post
Share on other sites

We don't get notifications when you edit a post. 

 

I'm a little unsure what you're trying to accomplish. You really shouldn't use onComplete like that. Just use a timeline with .set(). There's no need for jQuery.

 

And what are you expecting to happen with an elastic ease? Look at what it does.

 

image.thumb.png.cb593cc627c594a7dae7dda328a44876.png

 

Opacity can only go to a value of 1. An elastic ease is just going to make your element blink. Eases that go beyond 1 will most likely not look good for properties like opacity or color.

 

You can use a timeline to animate x, y with an elastic ease, and opacity with a different ease.

 

But I don't know why you are trying to animate x and y to 0 when x and y are already at 0. Are you trying to do FLIP animation?

https://greensock.com/docs/v3/HelperFunctions#FLIP

 

 

 

 

 

Link to post
Share on other sites
6 minutes ago, OSUblake said:

Opacity can only go to a value of 1. An elastic ease is just going to make your element to blink. Eases that go beyond 1 will most likely not look good for properties like opacity or color.

 

So this is what the opacity value is going to look like over time. It shoots up to 1, and then fades in and out a couple of times.

 

image.png.6531640564c06f21437da311e23e1ee6.png

 

 

  • Like 1
Link to post
Share on other sites

@OSUblake Could you give me an example of using the the timeline set based on my code?

Also my code has the opacity between 0 and 1, not sure i understand where your getting that from.

 

I am trying to have one section fade out and hide and the other appear. 

 

Sorry this is all new to me and I am still learning. 

Thanks

Link to post
Share on other sites
Just now, james182 said:

I am trying to have one section fade out and hide and the other appear. 

 

Yes, but they are both visible.

 

1 minute ago, james182 said:

Also my code has the opacity between 0 and 1, not sure i understand where your getting that from.

 

Yeah, but you're using an ease that takes that value beyond 1.

 

1 minute ago, james182 said:

Could you give me an example of using the the timeline set based on my code?

 

You're code has a bunch conflicting stuff going on in it, but going on the code you currently have, it would be like this.

 

gsap.timeline()
.to('#' + fromSection,
  {
    x: 0,
    y: 0,
    duration: 0.5,
    opacity: 0,
    ease: "power3"
  }
)
.set('#' + fromSection, { display: "none" })
.set('#' + toSection, { display: "block", opacity: 0 })

 

Link to post
Share on other sites

@OSUblake Ok thanks for the tips.

 

I have updated the codepen example, i have the old section fading out and sliding and the new section needs to come in the elastic bounce this is what i am trying to achieve. Would I need to put the ease out side the {} on the fromTo() action?

 

Link to post
Share on other sites
13 minutes ago, james182 said:

Also my code has the opacity between 0 and 1, not sure i understand where your getting that from.

 

It's just like if you were to animate x on an element to say like 100. It's going to animate the x value to something beyond 100, and then to a value below 100, and then to a value beyond 100, and then to value below 100, etc until it settles on 100.

Link to post
Share on other sites
2 minutes ago, james182 said:

I have updated the codepen example

 

Please create a new fork for every revision, and post the fork.

 

3 minutes ago, james182 said:

i have the old section fading out and sliding and the new section needs to come in the elastic bounce this is what i am trying to achieve. Would I need to put the ease out side the {} on the fromTo() action?

 

You still have conflicting animations going on. Your timeline and the toSection tween are starting at the same time . Just put everything on 1 timeline.

 

And I'm still not sure of how this supposed to look. Where does the new section come from? I'm sorry, but what you're trying to does not make any sense to me.

  • Like 1
Link to post
Share on other sites
gsap.fromTo(
  "section#" + toSection,
  {
    x: 0,
    y: 0,
    opacity: 0
  },
  {
    x: 0,
    y: 0,
    opacity: 1,
    duration: 1.5,
    ease: "power3"
  }
);

 

1 minute ago, OSUblake said:

I'm sorry, but what you're trying to does not make any sense to me.

 

The element is already at a value of x = 0 and y = 0. That does nothing.

  • Like 1
Link to post
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.

×