Hide / Show sections issues

[james182 3 Likes (Newbie)]

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 December 4, 2019 by james182
Added CodePen Example

[ZachSaucier 7,162 Likes (Superhero)]

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.

 

[OSUblake 18,533 Likes (Superhero)]

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.

 

 

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

 

 

 

 

 

[OSUblake 18,533 Likes (Superhero)]

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.

 

 

 

[james182 3 Likes (Newbie)]

@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

[OSUblake 18,533 Likes (Superhero)]

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 })

 

[james182 3 Likes (Newbie)]

@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?

 

[OSUblake 18,533 Likes (Superhero)]

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.

[OSUblake 18,533 Likes (Superhero)]

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.

[OSUblake 18,533 Likes (Superhero)]

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.

[OSUblake 18,533 Likes (Superhero)]

Perhaps you are trying to do something like this?

 

See the Pen 11de96eef40d53e28c941e8904e98578 by osublake (@osublake) on CodePen

 

It's important to understand how display none affects position.

[james182 3 Likes (Newbie)]

Yes thats exactly what i was trying to get

thanks