Jump to content
Search Community

Sequencing elements to then from

1DMF 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 am unsure how I construct an animation so that I have a transition out of an li element, but later bring it back in.

<ul>
<li><div>tab 1 animation elements</li>
<li><div>tab 2 animation elements</li>
</ul>

A standard 'list' built slider panel where the outer ul is position:relative, overflow:hidden,  the inner li position:absolute

 

The active 'panel' li element display:block, the rest dislpay:none;

 

I have a button control, when clicked,  I want to animate away the elements in the active panel, then animate the desired 'panel' li into the viewport. 

 

As they all start in the same position, I thought I could simply animate using timeline.to(y:"-=1000",'my easing')

 

However, after the animation the timeline var is out of scope, so now the animated elements are out of view , how do  I bring them back in  view?

 

I don't know what their original position was, to do a reverse animation.

 

I was thinking I need to store somewhere the 'panel' elements original positions. to put them back to where they were (hidden), then do a timeline.from(y:-"-=1000",'my easing') to animate them into the viewport.

 

This seems a bit clunky and wondered if there is a better solution or is this the only way , remembering animation element's original position to put them back?

 

Your advice is appreciated.

1DMF

 

Link to comment
Share on other sites

Hello 1DMF,

 

Im kind of confused on the behavior you are seeing. If possible can you create a codepen demo example, so we can see your code in context.

 

How to make a codepen demo example tutorial video

 

Also your HTML markup is missing the ending div tags </div>

<!-- you have this -->
<ul>
<li><div>tab 1 animation elements</li>
<li><div>tab 2 animation elements</li>
</ul>

<!-- it should be this -->
<ul>
<li><div>tab 1 animation elements</div></li>
<li><div>tab 2 animation elements</div></li>
</ul>

Thank You! :)

Link to comment
Share on other sites

Thank you for the codepen demo example, it will be really helpful!

 

When i go to your codepen example, i get the following error in the console:

ReferenceError: animate is not defined
http://s.codepen.io/boomerang/ea96c7550b24fd69b1f79caac72092fc1394202629409/index.html/event/seq/6/onclick
Line 2

This is due to the animate() function you have inline on your button tags. There is no animate() function in your JS panel.

Link to comment
Share on other sites

I know, that's the point of this thread, I don't know how to manage the animation.

 

I could make it animate away, but then how do I get it back?

 

Plus you should only get an error if you click a button, and when I try I don't get an error when it loads nor when I click a button?

Link to comment
Share on other sites

No worries... What browser are you using?

 

If you are using Firefox, Google Chrome, or Opera 18+ .. just click the F12 key on your keyboard to open up the browser console. Or right click to get the context menu and select Inspect Element

 

The error gets thrown even if you don't click the button, because when the page loads the browser tries to find the reference to that function animate() .. but does not find the function and throws an error.  Which stops the page from working.

 

Here is an example of a basic slider i made using GSAP:

 

See the Pen qxsfc by jonathan (@jonathan) on CodePen

 

:)

Link to comment
Share on other sites

onclick event handlers are not normally validated when HTML is parsed, only when the button is clicked and the event triggered, is it then interpolated and an error thrown.

 

I could put that code into a normal HTML file, load it and even with the FF web console open it would not throw an error until the button was pressed.

 

This must be some quirk with the way codepen works (or doesn't in this case).

 

As can be proved with this simple example : http://homeloanpartnership.com/codepenbug.html

 

Open it in Firefox with the web developer's 'web console' open, it will not error until the button is clicked.

Link to comment
Share on other sites

Hi,

 

The main problem is that you're targeting non-existent elements in your timeline.

var tl = new TimelineLite();

tl.to("#redBox", 2, {left:550})
  .to("#blueBox", 2, {left:550}, "-=1");

You're pointing to an element with an id "redBox" and another with an id "blueBox", but here's your html:

<button id="button1" onclick="animate(1)" />button 1</button>
<button id="button2" onclick="animate(2)" />button 2</button>

<ul>
  <li class="active"><div>tab 1 animation elements</div></li>
  <li><div>tab 2 animation elements</div></li>
</ul>

Your <li> items don't have the corresponding id and you're not creating the animate function in your javascript. Also is never a good idea to define your click events in the element tag, is better to do it in your code.

 

Another issue is that your <li> elements don't have a position set, in order to animate position properties(left, top, right, bottom, margins, etc) the elements must be positioned, whether relative or absolute.

 

The following code should do the trick:

HTML

<button id="button1">button 1</button>
<button id="button2">button 2</button>
<ul>
  <li id="redBox"<div>tab 1 animation elements</div></li>
  <li id="blueBox"><div>tab 2 animation elements</div></li>
</ul>

CSS

ul {
  border:1px solid #000;
  width:400px;
  position:relative; 
  height:300px; 
  overflow:hidden;
}

ul li {
  position:absolute;
  list-style:none;
  width:400px;
}

JS

var tl = new TimelineLite({paused:true}),
    button1 = document.getElementById("button1"),
    button2 = document.getElementById("button2");

tl.to("#redBox", 2, {left:-550})
  .from("#blueBox", 2, {left:550}, 0);

button1.onclick = function()
{
  tl.play();
}

button2.onclick = function()
{
  tl.reverse();
}

You can see it working here:

 

See the Pen AJhyd by anon (@anon) on CodePen

 

Also you could take a look at this codepen sample by Chrysto:

 

See the Pen LckBh by bassta (@bassta) on CodePen

 

Is basically a bare-bone slider, always a good starting point to create one.

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Rodrigo hit it on the money

 

Either way there is an error,  either when the page loads (in codepen) or/and when clicked.. it doesn't stop the fact that your missing the animate() function reference in your code. And the selector targets you are using in your tweens have ID's (#redBox, #blueBox)  that dont reference any ID in your HTML.

 

When creating a slider you want to setup everything in the HTML first.

 

Like for instance in the UL in your HTML you want to have margin and padding at ZERO, so your slider takes up your defined width and height without the UL indent.

 

Its best to have all your markup with the right selectors first and then it makes animating easier ;)

  • Like 2
Link to comment
Share on other sites

Sorry, I forgot to remove the default auto generated JS!

 

I'll wait till I get home after Friday pool with the lads. :-)

 

The code needs re-writing and is on my Linux devel server at home, I spend a few hours last night refactoring the actual mark-up and need to rewrite the GSAP JS,

 

Once I have some real code I will put a proper demo together, and we can take it from there.

 

I'm very excited about GSAP and the widget I'm building and am looking forward to you guys helping me wrap my head around the problem I currently am having.

 

Which I'm finding hard to explain in simple words.

 

Thanks for the input so far, really has been appreciated.

 

Regards,

1DMF

Link to comment
Share on other sites

Yep, I totally echo Jonathan's advice. Getting your HTML and CSS right is the most important step into building this type of stuff, otherwise when you start your animations everything breaks up and is not a happy moment of your day, believe me I've been there ;).

 

Happy Tweening!! 

  • Like 1
Link to comment
Share on other sites

OK, I have put together a demo over the weekend...

 

http://dance-music.org/spotlight_demo/spotlight_demo.html

 

You will see I currently get the original position of the first list element.

 

Then later use that to reset the position of each list element before either sliding out or sliding back in.

 

Also I feel there is a little bit of a delay between the out and in, and guess only if I chain them together will I be able to remove the gap and use the additional argument so the slide coming in starts a millisecond before the other slide leaves the viewport.

 

Playing around I found I needed to make both elements visible before I could then animate them, and it felt a little clunky, hence moving them to two separate phases so to speak (oncomplete).

 

Your input is appreciated.

 

1DMF

Link to comment
Share on other sites

Hi,

 

Cooll app, looks very nice, great job!!

 

The time gap between both tweens happens because you're defining an Elastic.easeInOut for the element that you're animating in the clearActive function, therefore before the element animates to it's final position makes an elastic movement outside the view. If you change that ease to Elastic.easeOut there shouldn't be any gap.

 

Rodrigo.

Link to comment
Share on other sites

Wow thanks, I wasn't expecting that response!

 

So you think I have coded it correctly and I simply need to alter the easing for the animation to follow each other more smoothly, in essence I'm doing it right?

Link to comment
Share on other sites

Yep, unless I'm missing something that another user can spot (it wouldn't be the first time :P) I believe that there are no issues neither with how the app works and your code (is great to see that you got it working with little over 80 lines of code), so yeah changing the easing for that particular tween should solve the time gap issue.

 

Finally just an observation. I don't know if you plan adding more tweens to the slides animations. If you won't I don't see the need of using a timeline, just a TweenLite instance will suffice in this case. But if you're aiming to add more tweens then a timeline is the best choice.

 

Happy Tweening!!!

Link to comment
Share on other sites

Cool, good to know I'm on the right track.

 

I thought I was using a timeline? (var tl = new TimelineLite...)

 

I was considering implementing animation that made parts of the content 'peel' away so to speak.

 

So the bottom caption starts to move then the middle 'content', and then the top title, and then the next item falls into place in reverse order, title, middle content then bottom caption.

 

But I was having difficulty storing all the initial positions, as I do for the current 'li' item.

 

Though the missus said she thinks that might be OTT.

 

I don't want to annoy the user with too much animation, which can easily be done with these cool animation frameworks.

 

What's your thoughts?

Link to comment
Share on other sites

 

 

I thought I was using a timeline? (var tl = new TimelineLite...)

Yep , but right now you only have one instance on each timeline, so in that case they are a bit pointless. But as you said that more animations will be added is fine then.

 

As for too many animations in place, yep sometimes too many can be too much, and the best way to find that out is to test, test and test some more. Sure is great to see things moving around smoothly but too much movement can confuse the user, the best thing is run what you've made through common end-users, pretty much like the ones that will be using/visiting your the site, specially since we can get carried away with stuff sometimes.

 

Happy Tweening!!

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...