Slide in object onclick

Community Beginner ,
May 24, 2021 May 24, 2021

Copy link to clipboard

Copied

My goal is to get a panel to slide in with easing when I click a button.

 

Solution attempt #1: I tried using the Action Wizard to change the position of the panel:

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.myTermConditionsBtn.on('click', function(){
/*
Moves the specified symbol instance up or down by decreasing or increasing its y property by the specified number of pixels.
To move the instance up input a negative number.
*/
	_this.termsConditionsPanel.y-=140;
});
var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.termsConditionsPanel.on('click', function(){
/*
Moves the specified symbol instance up or down by decreasing or increasing its y property by the specified number of pixels.
To move the instance up input a negative number.
*/
	_this.termsConditionsPanel.y+=140;
});

Issue with Solution 1: This works well without affecting the main animation, but I have not been able to figure out how to add easing/smooth transition. It starts off canvas, I click the button and then it jumps into place.

 

Solution attempt #2: I've tried stopping the main animation and adding the slide-in animation at the end of the timeline:

/* stop main animation */
this.stop();

 

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.myTermConditionsBtn.on('click', function(){
	/*
	Moves the playhead to the specified frame label in the timeline and continues playback from that frame.
	Can be used on the main timeline or on movie clip timelines.
	*/
	_this.gotoAndPlay('slidePanelOpen');
});


var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.termsConditionsPanel.on('click', function(){
	/*
	Moves the playhead to the specified frame label in the timeline and continues playback from that frame.
	Can be used on the main timeline or on movie clip timelines.
	*/
	_this.gotoAndPlay('slidePanelClose');
});*/

Issue with solution #2: When I click the button, the animation works by jumping to a particular frame where I've added the slide in animation. The trouble with this solution is that if I click the button during the main animation, it will skip the rest of the main animation and jump to the frame with the slide in animation. I really don't want to skip the main animation.

 

Any suggestions of a solution how to add a slide-in panel with easing without affecting the main animation?

TOPICS
Code , Timeline

Views

177

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , May 25, 2021 May 25, 2021
Hi. If your panel is a single Movie Clip containing both the in and out animations, then the panel can be called and dismissed by just using the play method. Like this: var root = this; root.myTermConditionsBtn.on("click", function() { root.termsConditionsPanel.play(); }); root.termsConditionsPanel.on("click", function(e) { e.currentTarget.play(); }); FLA / source code / download: https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/slide_panel And this ap...

Likes

Translate

Translate
Adobe Community Professional ,
May 25, 2021 May 25, 2021

Copy link to clipboard

Copied

Hi.

 

If your panel is a single Movie Clip containing both the in and out animations, then the panel can be called and dismissed by just using the play method. Like this:

 

 

var root = this;

root.myTermConditionsBtn.on("click", function()
{	
	root.termsConditionsPanel.play();
});

root.termsConditionsPanel.on("click", function(e)
{
	e.currentTarget.play();
});

 

 

 

FLA / source code / download:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/slide_panel

 

And this approach also has the advantges of allowing the user to click multiple times on the button and on the panel without causing any jumps and also the button become capable of toggling the panel.

 

I hope it helps.

 

Regards,

JC

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 25, 2021 May 25, 2021

Copy link to clipboard

Copied

@JoãoCésar Oh man, I've been stuck on this for ages! Thank you, this is perfect!! 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 25, 2021 May 25, 2021

Copy link to clipboard

Copied

LATEST

Excellent! You're welcome!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines