Three points at timeline

[Maxim Kurdyukov]

Hi community! 

First of all i want to say that GSAP is awesome! Pleasuring to use it, don't know now how things will be done without it..

 

So the problem where i had stuck is next:

First imagine page, with content, images, svg elements, and they are animated on start by css, let's say - "initial sliding animation". 

 

Then we have next:

1.  We have two visual blocks. 
   1. On click the block expands => "Triangle button" become visible. => Content inside it changes and animates => Content under it becomes visible, and we can scroll the page. ("Triangle button" have fixed position)
   2. When clicking "Triangle button" we need to show another block, and doesn't matter at what point of page we currently are, block should slide in.
   3. Plus we need hover animation.

So the questions:

1. Is there a way to play timeline to some point on mouseenter and play back on mouseleave, and if we click on it it expands fully?
2. Now i haven' t any idea how to implement opening of another side when we scrolled already at some point on page. Hope you may help.

 

Thanks a lot!

See the Pen bMMGzL by kumaxim (@kumaxim) on CodePen

[ZachSaucier]

Hey Maxim and welcome to the GreenSock forums!

 

2 hours ago, Maxim Kurdyukov said:

Is there a way to play timeline to some point on mouseenter and play back on mouseleave, and if we click on it it expands fully?

This sounds like you need .tweenTo() (or animating the timeline's progress) on the mouseenter, .reverse() on the mouseleave, and .play() on the click.

 

2 hours ago, Maxim Kurdyukov said:

i haven' t any idea how to implement opening of another side when we scrolled already at some point on page.

You should treat it like a page transition: 

1. Animate out whatever content is visible.
2. Change the state to the new content.
3. Animate in the new content.

[Maxim Kurdyukov]

 

On 3/25/2020 at 2:43 PM, ZachSaucier said:

This sounds like you need .tweenTo() (or animating the timeline's progress) on the mouseenter, .reverse() on the mouseleave, and .play() on the click.

Seems like i'm doing something wrong.

I tried to use .tweenTo( ) with given parameter of 0.7sec, but animation "jumps" to that point. Usage with .reverse() gives the same result on reversed state of animation, it "jumps". Also having an issue with position of animation, while i hover that block, it always "jumps" farther and farther (check demo on codepen)

 

Also i think that i need to unbind mouseleave event after i have played animation fully 

 

[ZachSaucier]

It's not entirely clear how you're wanting things to function so it's a bit difficult to give a clear answer. I encourage you to take a step back and analyze if your approach is good for what you're trying to accomplish. For example, I don't think it's a good idea to add new tweens to old timelines inside of the interaction event listeners. Usually you want to set up timelines at the start and then use control methods on them to control their play state (not adding to them later). You generally want to use regular tweens inside of event listeners, especially if tweens conflict with other tweens.

 

Depending on your needs, you could set it up this way:

1. On load, create a timeline that starts in the final state of one of the sections, animates to the hover state of that section, animates to the middle state (what is currently the start state), animates to the hover of the other section, and then animates to the final state of the other section. Set the progress of that timeline to 0.5 on page load (the middle state).
2. When hovering one of the sections, animate to that part of the timeline. When unhovering, go back to the state that it was in before.
3. When a different section is clicked, animate all the way to the other end of the timeline. Attach logic to the onComplete to fade in content that you need (and possibly fade out other content).

This will reduce the amount of overwriting that can occur and keep the logic more straightforward. 

 

Here's a basic example of the above technique:

See the Pen GRJwYqp?editors=0100 by GreenSock (@GreenSock) on CodePen